I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.

$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')

I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful! /

The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.

This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: (I'm working with Step 2).

Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.

I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.

$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')

I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful! http://jsfiddle/jodriscoll/LZA7e/

The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.

This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: http://secure.massgeneral/event-form (I'm working with Step 2).

Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.

• javascript
• jquery

• Q: What am I trying to do? A: I'm going to be adding a border to separate the rows for better understanding, however, I would like the LAST table-row to not inherit the CSS border. You can see the current implementation of the border by navigating to the secure.massgeneral/event-form path. – J O'Driscoll Commented May 29, 2013 at 16:38
• FYI - This is being targeted for responsive mobile design. In order to see the CSS and UI I'm working with, please resize your browser to a mobile phone resolution (max-width: 767px). – J O'Driscoll Commented May 29, 2013 at 16:40

5 Answers 5

If all the parent <tr> elements have the classes BBListOddRowStyle or BBListEvenRowStyle you can do this:

$('table[id*="dgRegistrantList"]').find('tr[class*=RowStyle]:last')
    .addClass('EventRegLastAttendee')

DEMO

If not, you can use .children() twice to make sure you target the right ones:

$('table[id*="dgRegistrantList"]').children('tbody')
    .children('tr:last').addClass('EventRegLastAttendee')

DEMO

Use this code to target the last row:

$('table[id*="dgRegistrantList"]').find('tr[class^=BBList][class$=RowStyle]:last').addClass('EventRegLastAttendee')

Explanation:

tr //it will look for tr
[class^=BBList] //which class starts with BBList
[class$=RowStyle] //and ends with RowStyle (so we're leaving Odd and Even inside and not recognized)
:last //the last of those element, if you remove it you select all of them

Is .children() what you're looking to do?

$('table[id*="dgRegistrantList"]').children('tr:last').addClass('EventRegLastAttendee');

.children() only goes down one dom level, while .find() will go down as far as it can.

Don't use find. It will look at any depth and it may match unintended subtables. Perhaps it will work for your example, but you don't want to be acquiring a bad habit. Plus, find will be more costly than a targeted approach.

You want a more targeted approach:

var targetTd = $('table[id*="dgRegistrantList"]').children('tbody').children('tr:last').find('table:first').children('tbody').children('td:last');

use this code to target parent tr last row

$('table[id*="dgRegistrantList"]').find('tr[class^=BBList]:last').addClass('EventRegLastAttendee');