Question

我已经为问题创建了这个小提琴，因为你会看到有三个表使用jQuery进行斑马条。

表1以正确的形式显示，因为它从0开始tr索引为偶数。表2从最后一张表继续，它显示第一行为白色而不是黑色。我认为它正在发生，因为它从最后一个表的tr索引继续。

HTML：

<table>
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

JavaScript的：

$('table').find('tr:even').css('background','#d0d0d0');

小提琴：http://jsfiddle.net/daljir/gryh5/

Answer 1

您可以使用find()分别对每个表“工作”：

$("table").find("tr:even").css("background", "#d0d0d0");

DEMO： http://jsfiddle.net/gryh5/1/

Answer 2

您正在选择文档中的所有<tr>元素，您可以使用nth-child选择器选择文档中所有偶数编号的<tr>。

$('table tr:nth-child(2n)').css('background','#d0d0d0');

http://jsfiddle.net/Kyle_Sevenoaks/gryh5/7/

Answer 3

这是因为您通常会选择所有tr（无论表格如何），当它们堆叠时，您将获得此特定行为。试试这个：

$('table').find('tr:even').css('background','#d0d0d0');

检查FIDDLE

Answer 4

这有效

<table id="t1">
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table id="t2">
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table id="t3">
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

和JS：

$(function(){
    $('#t1 tr:even, #t2 tr:even, #t3 tr:even').css('background','#d0d0d0');
});

jsfiddle：http://jsfiddle.net/SnakeEyes/gryh5/2/

Answer 5

http://jsfiddle.net/gryh5/9/

$('table').each(function(){
   $(this).find('tr').filter(':even').css('background','#d0d0d0');
});

意外行为：甚至是jquery中的伪选择器

5 个答案: