jQuery nested filter

Question

I'd like to have the first 6 columns of a GridView perform an action, but I need to highlight the entire row when it is clicked. The entire row highlighting is working, but I can't quite get the capturing of the first 6 columns. How do I capture the first 6 columns click in the following where the testing variable is located?:

$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr").filter(function() {
    return $('td', this).length && !$('table', this).length
})
.bind('click', function(e) {
    if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
    _activeRow = $(this).addClass('gridviewrow-highlighted');

    var testing = $('td:lt(6)', this);

});

Answer 1

Try this. You are binding the click even to only the first 6 TD's.

$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr").filter(function() {
    return $('td', this).length && !$('table', this).length
})
find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(4), td:eq(5)").bind('click', function(e) {
    if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
    _activeRow = $(this).addClass('gridviewrow-highlighted');

    var testing = $(this);

});

Answer 2

You can do it like this:

var _activeRow;
$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr")
  .delegate('td:not(:has(table)):lt(6)', 'click', function(e) {
     if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
     _activeRow = $(this).closest('tr').addClass('gridviewrow-highlighted');
  });​

You can try it out here. I'm not sure about your parent-row-with-child-table exclusion, but I've replicated it here since I'm sure you had a reason :)

This uses .delegate() to reduce the number of event handlers, it attaches an event handler to each row, and when a <td> that's :lt(6) (less than 6th index, 0-based) gets clicked we go up to the nearest <tr> using .closest() and do the class manipulation there.