jQuery to select last cell in a column when using rowspan
I have a table like this:
<table>
<tr><td>Not This</td><td rowspan="3">This</td></tr>
<tr><td>开发者_如何学C;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.
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/
You should be able to skip the first <td>
like so:
$("table tr td:gt(0)").addClass('someclass');
You could go with something like this, might be an expensive lookup if you have many rows though:
$('table tr').each(function(){
if( $('td',this).size() > 1 ){
$(this).find('td:last-child').addClass('someclass');
};
});
Here's a JSBin demo
You could also do this, taking from the Spolto's example:
$('table tr').each(function(){
$('td:gt(0)',this).addClass('someclass');
});
Another JSBin demo
This should work:
$("TD ~ TD:last-child").addClass('someclass');
Setting the border on the table itself would probably work too.
精彩评论