December 15 2013

Jquery highlight table row on click

Tagged Under :

To highlighter table row when user click the row. The easy way was add a css class on table “tr”.

How to add a css on “tr”? you need used JQuery to perform this action.

Before that, you need a table like below:
<div id="gridview">
  <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <td>Row 1</td>        
      <td>Row 2</td>        
      <td>Row 3</td>            
      <td>Row 4</td>        

And then add the “highlighted” css class as well
.highlighted {
    color: #261F1D
    background-color: #E5C37E;

After that, you can add the JQuery script in your page.
$('table').on('click', 'tr', function () {
    var selected = $(this).hasClass('highlighted');
    if (!selected) { $(this).addClass('highlighted'); }

Above script only can highlighted 1 row only. But if you want highlight multiple row, you can use script as below:
$("#gridview tr").click(function() {

Make a Comment