开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜