单击一行时，如何将“选定”类添加到表的一行？

Question

I am using the following code:

$("#dataTable tbody").on("click", "tr", function (event) {
    if (!$(this).hasClass('row_selected')) {
        $(oTable.fnSettings().aoData).each(function () {
            $(this.nTr).removeClass('row_selected');
        });
        $(this).addClass('row_selected');
        gridClickHandler($(this));
    }
});

When a row is clicked then if the row is already selected nothing happens. If not then all the rows have the class removed and the current row has the row_selected class added.

However this is slow as my tables have many rows. It does not look good with the current delay. What I thought of was moving the addClass to the start. But if I do that the the .each loop removes it.

Is there a way I could make this work more efficiently (faster response)?

<table id-"dataTable">
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table> 

Answer 1

Here's a sample

$('table').on('click', 'tr', function() {

    var row = $(this);                 //cache the row

    if(!row.hasClass('selected'){
        row.addClass('selected')       //add class to clicked row
            .siblings()                //get the other rows
            .removeClass('selected');  //remove their classes
        gridClickHandler(row);
    }
});​

The advantage of using .on() is that it binds only one event handler to the parent (in this case, table ) for the children (the tr ). Using .click() on each row means there is one handler for each tr element which is an overhead.

So for example, if I had a thousand rows, there would be a thousand click handlers when you use .click() as opposed to only click handler on the table to listen for all the tr 's click events when using .on() .

Answer 2

$("#dataTable tbody tr").click(function () {
    $('#dataTable tbody tr.selected').removeClass('selected');
    $(this).addClass('selected');
    gridClickHandler($(this));
});

Check this jsfiddle , works quite fast even with big tables!

-- edited after comment --

Answer 3

Try this:-

 $("#dataTable tbody tr").on("click", "tr", function (event) {        
         $("#dataTable tbody tr").removeClass('row_selected');
         $(this).addClass('row_selected');
     }
 });

Answer 4

$("#dataTable").on("click", "tr", function (e) {
    var $this = $(this);
    // this line removes all selected classes from the rows siblings
    $this.siblings().removeClass("row_selected");
    // this line will toggle the selected class,
    // therefore deselecting the row if it has been selected before
    $this.toggleClass("row_selected");
    gridClickHandler($this);
});

Or alternatively cache the previously selected row.

(function() {
    var $oldSelected = null;

    $("#dataTable").on("click", "tr", function (e) {
        var $this = $(this);
        // this line removes all selected classes from the rows siblings
        $oldSelected.removeClass("row_selected");
        // this line will toggle the selected class,
        // therefore deselecting the row if it has been selected before
        $oldSelected = $this.addClass("row_selected");
        gridClickHandler($this);
    });

})();

And as a side note, caching jQuery calls - or result of a function call that you need repeatedly for that matter - is always a good idea to save on processing time.