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);

});

This works at the "var testing" line, but I'm not sure if there is a cleaner way?: if ($('td:lt(6)', this).is('td')) { alert('inside?'); }; — RSchmitt
– RSchmitt, Commented Jul 9, 2010 at 15:19

Nick Craver · Accepted Answer · 2010-07-12 17:41:34Z

1

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.

edited Jul 12, 2010 at 17:41

answered Jul 11, 2010 at 12:23

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RSchmitt Over a year ago

I didn't know of the delegate function - that will do the trick! Thanks!

Zacho · Accepted Answer · 2010-07-09 14:31:15Z

0

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);

});

answered Jul 9, 2010 at 14:31

Zacho

86112 silver badges20 bronze badges

2 Comments

RSchmitt Over a year ago

This will capture the first 6 rows, but it won't highlight the entire row. But I could use this and change _activeRow to get the parent TR for highlighting I guess. Still wondering how I could move the find filter down to the "var testing" line and do a function within that? Like a filter within a filter. How do I do something like this on the "var testing" line: $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(4), td:eq(5)") { function() { doStuff(); } }

Zacho Over a year ago

This will actually get the first 6 columns, of whatever row is clicked. I guess I am confused about what you are after.

Collectives™ on Stack Overflow

jQuery nested filter

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related