Question

 $(function(){

                $("tr:even").addClass("even");
                $("tr:odd").addClass("odd");


            }) 


     <table>
        <tr>
            <td>A</td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr><td>A-1</td></tr>
                    <tr><td>A-2</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
    </table>

运行上面的代码，偶数/奇数类已被添加到嵌套表中，如：

<table>
    <tr class="even">
        <td>A</td>
    </tr>
    <tr class="odd">
        <td>
            <table>
                <tr class="even"><td>A-1</td></tr>
                <tr class="odd"><td>A-2</td></tr>
            </table>
        </td>
    </tr>
    <tr class="even">
        <td>B</td>
    </tr>
</table>

我应该做什么改变才能使偶数/奇数类不在嵌套表中，输出如下：

<table>
    <tr class="even">
        <td>A</td>
    </tr>
    <tr class="odd">
        <td>
            <table>
                <tr><td>A-1</td></tr>
                <tr><td>A-2</td></tr>
            </table>
        </td>
    </tr>
    <tr class="even">
        <td>B</td>
    </tr>
</table>

Answer 1

向您的外围表格提供id，然后使用child selector：

$("#yourTable > tbody > tr:even").addClass("even");
$("#yourTable > tbody > tr:odd").addClass("odd");

子选择器仅选择直接子项，而不是所有后代（当前选择器只选择DOM中的所有td元素，无论它们位于哪个表中。

Answer 2

如果您可以控制HTML，则可以将类添加到要排除的行中，然后在jQuery选择器的“not”selctor中指定该类 -

<强>的jQuery

$("tr:not(.inner):even").addClass("even");
$("tr:not(.inner):odd").addClass("odd");

<强> HTML

<table>
        <tr>
            <td>A</td>
        </tr>
        <tr class="inner">
            <td>
                <table >
                    <tr class="inner"><td>A-1</td></tr>
                    <tr class="inner"><td>A-2</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
    </table>

这将不会对包含嵌套表的'tr'应用任何样式，因此将奇怪的样式应用于'A'，甚至样式将应用于'B'。

工作演示 - http://jsfiddle.net/yPbfq/

如何防止在嵌套表中添加偶数/奇数类

2 个答案: