Как я могу чередовать "видимые" строки в HTML-таблице с помощью jQuery

Question

У меня есть этот код, который выполняет чередование строк для HTML в jQuery:

function AlternateRowColors() {

    $("table.altRow1 tr").filter(function() { 
    return true;
    }).filter(':even').addClass('alt'​​​​​​);

    $("tr.alt td[rowspan]").each(function() {
    $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
    });

    $('ins').css("background-color", "#cfc")
}

Это прекрасно работает (не стесняйтесь добавлять предложения, если что-то неэффективно выше).

ПроблемаТеперь у меня есть код, который скрывает кучу строк (подробности о том, почему это не очень актуально для этого вопроса), главное, что я хочу иметь функцию, которая может делать альтернативные цвета строк текущим видимым строкам.

Я скрываю строки, просто добавляя класс к определенным строкам, и они вызывают .hide() для этого класса.

Есть ли какие-либо предложения для получения альтернативных цветов строк (как в приведенном выше коде), нопусть он работает с видимыми строками, поэтому, независимо от того, что скрыто, таблица всегда выглядит корректно с точки зрения окраски альтернативных строк.

Answer 1

я завелась с помощью этого, который, казалось, работал:

function UpdateTable() {
$('table.altRow1 tr:visible').removeClass('odd').filter(':odd').addClass('odd');

с этим css:

.altRow1 tr {
     background-color: #FFFFFF;
 }
 .altRow1 tr.odd {
     background-color: #DEDEDE;
 }

Answer 2

Возможно, вы захотите снова вызвать эту функцию, когда вы прячете строки, чтобы она могла пересчитать нечетные и четные строки. Вы можете использовать not-selector в ваших таблицах, чтобы получить только видимые строки, например:

$('table.altRow1 tr:not(.hidden)') 

Answer 3

Я бы посоветовал вам добавить класс в видимые строки, а также в коде, который вы должны добавить в скрытые строки. Допустим, вы добавили класс с именем visible. Затем вы можете применить приведенный выше код чередующихся строк к видимому классу:

 $("table.altRow1 tr.visible").filter(function() { 

и т. Д.

Answer 4

Цепочка выбора:

$('table tr:visible:even').addClass('alt');