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

Question

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

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

我想显示/隐藏它的行,保持表条纹(从更改的行重新着色到最后一行).我看到有两种方法可以做到这一点:

1. 创建一个不可见的表,并<TR>使用jQuery 移动after()/从中移动它.我已经测试了分离并且它的工作原理(表在分离时重新着色),但是插入分离的(无处)行不会,所以将行移动到另一个表应该有帮助,我想.
2. 在我们切换之后调用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;}