jQuery для выбора последней ячейки в столбце при использовании rowspan - PullRequest
3 голосов
/ 09 декабря 2010

У меня есть такая таблица:

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

Как выбрать только самые правые ячейки (содержащие "Это") в каждой строке, чтобы я мог установить цвет границы?

Я пробовал что-то вроде:

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

Но при этом выбираются последние ячейки во 2-й и 3-й строках, даже если они не являются самой правой ячейкой.

Я не использую коллапс границы на своем столе и предпочел бы избежать этого.

Ответы [ 4 ]

3 голосов
/ 09 декабря 2010

Для этого требуется немного хитрости:

$(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');
});

Итак, вы начинаете с поиска любого td, который является последним дочерним элементом и имеет атрибут rowspan. Вы перебираете их, считая строки после каждой и добавляя класс в каждую из этих строк, чтобы «пропустить» их. Затем вы добавляете свой класс к последним дочерним ячейкам, которые не находятся в строке «пропустить», и, наконец, удаляете класс пропуска.

Демо здесь: http://jsfiddle.net/Ender/rzqEr/

1 голос
/ 09 декабря 2010

Вы должны пропустить первые <td>, например, так:

$("table tr td:gt(0)").addClass('someclass');
1 голос
/ 09 декабря 2010

Вы могли бы пойти с чем-то вроде этого, может быть дорогим поиском, если у вас много строк, хотя:

$('table tr').each(function(){

  if( $('td',this).size() > 1 ){
    $(this).find('td:last-child').addClass('someclass');
  };

});

Вот демонстрационная версия JSBin

Вы могли бытакже сделайте это, взяв пример Spolto:

$('table tr').each(function(){

  $('td:gt(0)',this).addClass('someclass');

});

Еще одна демоверсия JSBin

0 голосов
/ 09 декабря 2010

Это должно работать:

$("TD ~ TD:last-child").addClass('someclass');

Установка границы на самой таблице, вероятно, тоже будет работать.

...