Question

我有2个表，并希望根据新表重复交替行颜色。 tr:odd似乎适用于我的两个表格。

这是我的表格html：

<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
    <tr class='myRow'>
        <td>row 3</td>
    </tr>
</table>
<hr>
<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
</table>

的CSS：

.myAltRowClass { background: #DDDDDC; }

的javascript：

$(".myTable .myRow:odd").addClass('myAltRowClass');

jsfiddle：http://jsfiddle.net/niner/Sgq9T/

第一张桌子和第二张桌子都有交替的颜色，但是表格2中的第一行应该以正常（白色）颜色开始，而不是以交替（灰色）颜色开始。

我将不胜感激任何帮助。感谢。

Answer 1

当然，只需选择每个table的行：

$(".myTable").find('.myRow:odd').addClass('myAltRowClass');

JS Fiddle demo

或者，最好只使用CSS：

table.myTable tr:nth-child(even) {
    background: #DDDDDC;
}

JS Fiddle demo

请注意，我已在CSS even示例中切换到:nth-child()，这是因为JavaScript是从零开始的，而CSS是从一开始的。

或者将两种方法结合在一起：

$('.myTable tr:nth-child(even)').addClass('myAltRowClass');

JS Fiddle demo

Answer 2

您可以使用CSS3选择器:nth-child(odd)（或even，如果这是您需要的），它也适用于jQuery。反正比:odd好，因为那不是本机支持的选择器，jQuery不能使用性能更高的本地querySelectorAll（如in the docs所述）。

$(".myTable .myRow:nth-child(odd)")
    .addClass('myAltRowClass');

jsFiddle Demo

Answer 3

只是添加到这些：jQuery的：奇数，偶数等伪类选择器不要像你认为的那样表现;他们寻找例如由前面的选择器创建的jQuery数组的奇数成员。您可以将$（'。myTable .myRow：odd'）视为基于$（'。myTable .myRow'）创建对象的中间数组，然后从该数组中删除偶数元素。类似于：even，：first，依此类推（尽管nth-child（）是不同的，并且确实做了你所期望的）。

CSS交替表行重置在新表中？

3 个答案: