隐藏行时更新奇/偶行颜色

Question

我在一个页面上有几个表格和一个复选框，用于根据其中一个单元格的内容显示/隐藏行。虽然所有行都是可见的，但一切都很完美，行颜色会根据需要交替变化。但是，当我隐藏行时，交替的行颜色不再正确（显然）。如何在选中复选框时轻松更新类以保持交替的行颜色，然后在取消选中复选框后恢复正常？

<table id='27249'><thead><tr><th>h1</th><th>h2</th><th>h3</th><th>h4</th><th>h5</th><th>h6</th></tr><thead><tbody>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
</tbody></table>

Jsfiddle 示例 - http://jsfiddle.net/6bfjw/3/

Answer 1

有几种方法需要考虑。由于您的用例，纯 css 方法更具理论性，但实际上并不适合您。

在一个完美的世界里......

首先，为了让您的标记与样式保持松散耦合，并允许轻松扩展，请支持更灵活的 CSS 规则。 通常不需要在元素上硬编码even 和odd 类；这意味着每次尝试添加新元素时都必须添加这些类。相反，使用 css3 :nth-child 选择器：

tbody tr:nth-child(odd) {
    background-color:#99FFFF;
}

tbody tr:nth-child(even) {
    background-color:#FFFF99;
}

但是由于您隐藏元素而不实际删除它们...

jsFiddle

您需要使用 JavaScript，并手动管理这些类。每次复选框值更改时，将偶数和奇数类重新分配给可见行：

$("#checkbox").change(function () {
    if ($("#checkbox").is(":checked")) {
        $("table tbody tr").each(function () {
            var cell = $.trim($(this).find("td:eq(4)").text());
            if (cell.length == 0) {
                console.log("empty");
                $(this).hide();
            }
        });
    } else {
        $("table tbody tr").show();
    }

    $("table tbody tr").removeClass("odd even");
    $("table tbody tr:visible:odd").addClass("odd");
    $("table tbody tr:visible:even").addClass("even");
});

（当然这意味着你的 CSS 保持原来的样子）。

看看选择器上的jQuery docs。一些方便的是:even selector，更详细的:nth-child。

Answer 2

您可以使用 :odd 和 :even 选择器来做到这一点

在 change() 函数的末尾添加这段代码：

$("table tbody").each(function() {        
    $(this).find("tr:visible:even").addClass("even").removeClass("odd");
    $(this).find("tr:visible:odd").addClass("odd").removeClass("even");
});

我已经更新了你的Fiddle