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

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小提琴演示.

或者,最好只使用CSS:

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

JS小提琴演示.

请注意,我已经切换到evenCSS :nth-child()示例,这是因为JavaScript是从零开始的,而CSS是基于一的.

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

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

JS小提琴演示.