隐藏行时更新奇偶行颜色

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/

- Jack Hillard

Answer 1

你可以使用: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。

- EduSanCon

---

这真的很有用并且运作得很好。最终我选择了nbrooks的解决方案，因为它允许我摆脱一些不必要的css。 - Jack Hillard

Answer 2

有几种方法需要考虑。鉴于您的使用情况，纯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文档上选择器的相关内容。一些方便的选择器是:even选择器和更详细的:nth-child选择器。

- nbrooks

---

另外，专业提示，无需定义“nodisplay”类并手动切换它。jQuery已经实现了两种巧妙的方法，show和hide。隐藏元素就像$(this).hide()一样简单（反之亦然）。 - nbrooks

谢谢，这帮了我很多。我更新了我的show/hide函数，只使用show()和hide()，这样我就可以使用你的alternating class代码了。 - Jack Hillard