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

Question

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

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

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

1. 创建一个不可见的表并<TR>使用 jQuery 将 s移入after()/移出它。我已经测试了分离并且它可以工作（表在分离时被重新着色），但是插入分离的（无处）行没有，所以我猜将行移动到另一个表应该会有所帮助。
2. 在我们切换后立即调用 jQuerytoggle()并创建/删除不可见的。<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;}