3

I have 2 tables and would like alternating row colors to reset based on a new table. the tr:odd seems to be applied across both of my tables.

Here's my table 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/

The 1st table and 2nd table both have alternating colors, but the 1st row in table 2 should start out with the normal (white) color, and not the alternate (grey) color.

I would appreciate any help. Thanks.

4

3 回答 3

7

当然，只需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 小提琴演示。

于 2013-05-09T22:47:46.780 回答
1

只是添加到这些：jQuery 的 :odd、:even 等伪类选择器的行为方式不会像您认为的那样；他们寻找例如由前面的选择器创建的 jQuery 数组的奇数成员。您可以将 $('.myTable .myRow:odd') 视为基于 $('.myTable .myRow') 创建一个中间对象数组，然后从该数组中删除偶数编号的元素。:even、:first 等类似（尽管 nth-child() 有所不同，并且可以满足您的期望）。

于 2013-05-09T23:15:34.320 回答
1

您可以使用在 jQuery 中也可以使用的 CSS3 选择器:nth-child(odd)（或者even如果您需要的话）。比:odd无论如何都要好，因为这不是本机支持的选择器，并且 jQuery 不能为其使用性能更高的本机querySelectorAll（如docs 中所述）。

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

jsFiddle 演示

于 2013-05-09T22:48:00.880 回答