Question

我正在努力让 n-child（偶数） css在我的桌子排上工作。

我为你创造了一个小提琴，看看问题是什么：http://jsfiddle.net/jn9q8/

我有这个过滤系统，我在某些国家之后划分出版商。如果你点击＆＃34; ALL＆＃34;在顶部，您可以让所有发布者和第n个孩子（偶数）在那里正常工作，为每个第二个表行提供一个灰色背景。

然后点击＆＃34; EST＆＃34;你看到第n个孩子（偶数）不再像那里那样工作了。例如，您可以看到连续两条灰色背景线，因为＆＃34; ALL＆＃34;中的一些发布者类别不属于＆＃34; EST＆＃34;，而nth-child造型当然不知道。

我的风格如下：

       table.pubTable tr:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

是否还有其他方法可以让它发挥作用所以无论你在哪个类别点击背景颜色，每个出版商都会这样做？

Answer 1

隐藏和元素不会删除它，因此就CSS而言，该元素仍然存在，并且仍应计入nth-child。

我的建议是克隆表格作为“模板”。然后，在更改显示的行时，从此“模板”创建一个克隆，并从中删除不应显示的行。然后，您可以淡出显示的表格，然后淡入新的表格。

Answer 2

问题的原因是你的css代码将你的样式添加到所有tr中，所以即使你隐藏了一些tr它仍然保留在dom中并包含在奇数偶数中。

您可以尝试一种方法，首先在所有行中添加一个名为show的类，然后您的css将

table.pubTable tr.show:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

table.putTable tr.hide{
    display:none;
}

现在一旦你应用了过滤器，所以所有这些行都不需要显示删除类show并添加类hide现在你的样式只过滤tr.show所以它只会在tr.show上计算偶数和奇数，它们是可见的你会得到你想要的东西。

关于tablerow / data的n-child（偶数）

2 个答案: