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

【问题标题】：How can I alternate "visible" rows in an html table using jQuery如何使用 jQuery 在 html 表中交替“可见”行
【发布时间】：2018-10-25 06:29:32
【问题描述】：

我有这段代码在 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() 来隐藏行。

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

【问题讨论】：

你为什么要用只返回 true 的函数进行过滤？
@Andre - 你能澄清一下这个问题吗？
您正在使用 filter() 传递一个只返回 true 的函数。所以你什么都没过滤。
@Andre - 哦，我明白了。 .我实际上确实有一个功能，但我在问题中更改了它以避免噪音并专注于要点

标签： jquery html-table

【解决方案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;
 }

【讨论】：

【解决方案2】：

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

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

等等。

【讨论】：

【解决方案3】：

您可能希望在隐藏行时再次调用此函数，以便它可以重新计算奇数行和偶数行。您可以在 tablerows 上使用非选择器来仅获取可见行，如下所示：

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

【讨论】：

【解决方案4】：

链接选择：

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

【讨论】：