表中奇偶行的jQuery选择器_Jquery_Jquery Selectors

表中奇偶行的jQuery选择器

jquery

表中奇偶行的jQuery选择器,jquery,jquery-selectors,Jquery,Jquery Selectors,第一个代码块中的代码是源代码。在源代码运行之后。代码将被更改（请参见第二个代码块）我希望标签的类（即“偶数”和“奇数”）只显示在“表1”中。然而，当前一个嵌套表（即“table2”）也有每个标记的“偶数”和“奇数”类有人能帮我吗？提前谢谢 ------------第一个代码块----------------- <head> <script type="text/javascript"> $(document).ready(function(){

第一个代码块中的代码是源代码。在源代码运行之后。代码将被更改（请参见第二个代码块）

我希望标签的类（即“偶数”和“奇数”）只显示在“表1”中。然而，当前一个嵌套表（即“table2”）也有每个标记的“偶数”和“奇数”类

有人能帮我吗？提前谢谢

------------第一个代码块-----------------

<head>
<script type="text/javascript">
            $(document).ready(function(){
                $("#table1 tr:odd").addClass("odd");
                $("#table1 tr:not(.odd)").addClass("even");  
            });
</script>
</head>

<body>

<table id="table1">
    <tr>
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>
            <table id="table2">
                   <tr></tr>
                   <tr></tr>
            <table>
        </td>
    </tr>

</table>
</body>

<table id="table1">
    <tr class="even">
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr class="odd">
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr class="even">
        <td>
            <table id="table2">
                   <tr class="even"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>


$（文档）.ready（函数（）{
$（“表1 tr:odd”）.addClass（“odd”）；
$（“#表1 tr:not（.odd）”）.addClass（“偶数”）；
});
AAA
CCC
BBB
DDD

--------------第二代码块-------------------

<head>
<script type="text/javascript">
            $(document).ready(function(){
                $("#table1 tr:odd").addClass("odd");
                $("#table1 tr:not(.odd)").addClass("even");  
            });
</script>
</head>

<body>

<table id="table1">
    <tr>
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>
            <table id="table2">
                   <tr></tr>
                   <tr></tr>
            <table>
        </td>
    </tr>

</table>
</body>

<table id="table1">
    <tr class="even">
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr class="odd">
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr class="even">
        <td>
            <table id="table2">
                   <tr class="even"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>


AAA
CCC
BBB
DDD

它应该是：

$("#table1>tr:odd").addClass("odd");
$("#table1>tr:not(.odd)").addClass("even");

您可以使用以下符号（请注意大于号）：

这将仅选择直接子tr。

使用选择器

也可以使用：偶数而不是：not（.odd）

你只需要使用合适的CSS选择器。尝试：

$("#table1>tr:odd").addClass("odd");

所有张贴的答案几乎都是正确的

$(document).ready(function(){
    $("#table1 > tbody > tr:odd").addClass("odd");
    $("#table1 > tbody > tr:not(.odd)").addClass("even");  
});

许多浏览器会自动将

tbody

添加到您的表中，即使您自己没有添加一个。因此

#table1>tr

将不匹配，因为

tr

不是

table

的直接子级。您最好使用上面的方法，并为那些不适合您的浏览器显式添加

tbody

 <table id="table1">
      <tbody>
        <tr class="even">
            <td>AAA</td>
            <td>CCC</td>
        </tr>
        <tr class="odd">
            <td>BBB</td>
            <td>DDD</td>
        </tr>
        <tr class="even">
            <td>
                <table id="table2">
                   <tbody>
                       <tr class="even"></tr>
                       <tr class="odd"></tr>
                   </tbody>
                <table>
            </td>
        </tr>
      <tbody>

</table>


AAA
CCC
BBB
DDD

为了避免重复的DOM遍历，您可以使用如下方法：

$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')

你应该给你的问题一个更有意义的标题。这是行不通的：在chrome和IE8中测试过，但它与任何东西都不匹配。浏览器在内部添加一个

tbody

。

$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')