选择每隔一秒可见的表行

Question

我有一个显示树结构的表(超级和子类别).当用户单击超类别时,将显示子项的显示属性.

现在我想在每个第二个表行添加交替的背景颜色 - 但当然只考虑当前可见的那些.以下是结构的简化示例:

<table>
    <tr data-level="0"><td>Super 1</td></tr>
    <tr class="hide" data-level="1"><td>Sub 1</td></tr>
    <tr data-level="0"><td>Super 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 3</td></tr>
    <tr class="hide" data-level="1"><td>Sub 4</td></tr>
</table>

当用户单击"Super 2"元素时,将从子元素中删除"hide"类.

我尝试了几个选择器,例如:

/* Ugly result (dosn't recognize that elements are hidden) */
tr:nth-child(2n)
{
    background-color: grey;
}

/* Doesn't work at all */
tr:visible:nth-child(2n)
{
    background-color: grey;
}

/* Not what I inteded to do */
tr:not(.hide):nth-child(2n)
{
    background-color: grey;
}

我希望我明白我想做什么.

这是可能的CSS或我应该编写一个JS脚本,无论何时发生任何变化,重新计算偶数行和奇数行？提前感谢任何提示!

Answer 1

这个 jQuery 片段可以完成这项工作：

\n\n

$(\'tr\').removeClass(\'alternate\')\xe2\x80\x8b\n$(\'tr:not(.hide):odd\').addClass(\'alternate\')\xe2\x80\x8b\n

\n\n

在jsFiddle上玩它

\n