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规则。通常这意味着每次尝试添加新元素时都必须添加这些类。相反，请使用css3 even选择器：

odd

但是，因为您在没有实际删除元素的情况下隐藏元素...

jsFiddle

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

:nth-child

（当然这意味着你的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

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

2 个答案: