Question

我有这个代码在jQuery中为html执行交替的行：

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()来隐藏行。

是否有任何建议可以获得替代的行颜色（如上面的代码）但是它可以在可见的行上工作，因此无论隐藏什么，表格在alt行着色方面总是看起来正确。

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

我建议您在可见行中添加一个类，以及将类添加到隐藏行的代码。假设您添加名为visible的类。然后，您可以将上面的交替行代码应用于可见类：

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

等等。

Answer 3

您可能希望在隐藏行时再次调用此函数，以便可以重新计算奇数行和偶数行。您可以使用tablerow上的not-selector来仅获取可见行，如下所示：

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

Answer 4

链接选择：

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

如何使用jQuery在html表中交替“可见”行

4 个答案: