选择每隔一秒可见的表行 [英] Selecting every second visible table row

问题描述

我有一个表格显示树状结构（超级和子类别）。当用户点击超类别时，子元素的显示属性被切换。

现在我想在每隔一个表格行添加一个交替的背景颜色 - 只考虑目前可见的那些。下面是一个简化的结构示例：

 < table& 
< tr data-level =0>< td>超级1< / td>< / tr> 
< tr class =hidedata-level =1>< td> Sub 1< / td>< / tr> 
< tr data-level =0>< td>超级2< / td>< / tr> 
< tr class =hidedata-level =1>< td> Sub 2< / td>< / tr> 
< tr class =hidedata-level =1>< td> Sub 3< / td>< / tr> 
< tr class =hidedata-level =1>< td> Sub 4< / td>< / tr> 
< / table> 
 

当用户点击Super 2元素时，hide

  / 
 *丑结果（不知道元素是隐藏的）* / 
 tr：nth-​​child（2n）
 {
 background-color：gray; 
} 
 
 / *根本不工作* / 
 tr：visible：nth-​​child（2n）
 {
 background-color：灰色; 
} 
 
 / *不是我做的事* / 
 tr：not（.hide）：nth-​​child（2n）
 {
背景颜色：灰色
} 
  

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

有可能使用CSS，或者我应该写一个JS脚本，重新计算偶数和奇数行，只要有什么变化？
提前感谢任何提示！

解决方案

此jQuery代码段将执行此操作：

  $（'tr'）。removeClass（'alternate'）
 $（'tr：not（.hide）：odd'） .addClass（'alternate'）
  

使用 jsFiddle

I have a table displaying a tree structure (Super- and Subcategories). When the user clicks on a supercategory, the display property of the childs is toggeled.

Now I want to add an alternating background color on every second table row - but of course taking only those into account which are currently visible. Below is a simplified example of the structure:

<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>

When the user clicks on the "Super 2" element, the "hide" classes are removed from the child elements.

I tried several selectors, e.g.:

/* 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;
}

I hope I got clear on what i want to do.

Is that possible with CSS or should I write a JS script that recalulates the even and odd rows whenever anything changes? Thanks in advance for any hints!

解决方案

This jQuery snippet will do the job:

$('tr').removeClass('alternate')​
$('tr:not(.hide):odd').addClass('alternate')​

Play with it on the jsFiddle

这篇关于选择每隔一秒可见的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！