Question

I have a table like this:

<table>
    <tr><td>Not This</td><td rowspan="3">This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td><td>This</td></tr>
</table>

How can I select just the right-most cells (containing “This”) in each row so I can set the border-color?

I tried something like:

table.find('tr > td:last-child').addClass('someclass');

But that selects the last cells on the 2nd and 3rd rows even though they are not the right-most cell.

I am not using border-collapse on my table, and would prefer to avoid it.

Answer 1

This one required a bit of trickery:

$(function() {
    $('td:last-child[rowspan]').each(function() {
        $(this).parent().nextAll().slice(0,$(this).attr('rowspan')-1).addClass('skip');
    });
    $('tr:not(.skip) > td:last-child').addClass('someclass');
    $('.skip').removeClass('skip');
});

So, you begin by looking for any td that is a last child and has a rowspan attribute. You iterate over those, counting rows after each one and adding a class to each of those rows to “skip” them. Then you add your class to the last-child cells that aren’t in a “skip” row, and finally remove the skip class.

Demo here: http://jsfiddle.net/Ender/rzqEr/