Question

我有一张斑马条纹的桌子：

tr:nth-child(even)
{
    background-color: red;
}
tr:nth-child(odd)
{
    background-color: blue;
}

我想显示/隐藏其行，保持表条纹（从更改的行重新着色到最后一行）。我看到了两种方法：

创建一个不可见的表格，并将<TR>与jQuery after()一起移动到其中。我已经测试了分离并且它可以正常工作（表格在分离时会重新着色），但插入分离的（无处）行不会，因此我想将行移动到另一个表应该有帮助。
在我们切换之后立即调用jQuery toggle()以及创建/删除不可见的<TR>。

哪一个更好？也许，还有更好的方法吗？

此致

Answer 1

CSS的:nth-child选择器根据其兄弟姐妹中的索引选择一个元素。它不会考虑元素的可见性（或其他选择器）。

不是使用jQuery添加/删除行，只需添加/删除类名：http://jsfiddle.net/rTER4/

var $allRows = $('tr:visible');
var $oddRows = $allRows.filter(':odd');
var $evenRows = $allRows.filter(':even');

// Remove old classes, then add new ones.
$oddRows.removeClass('even').addClass('odd');
$evenRows.removeClass('odd').addClass('even');

/* CSS */
tr.even { background-color: red; }
tr.odd  { background-color: blue;}

在表格中隐藏/显示TR，保持斑马条纹

1 个答案: