jQuery selectors for even/odd rows in a table_问答_开发者

jQuery selectors for even/odd rows in a table

开发者 https://www.devze.com 2023-03-19 23:00 出处：网络

The code in the first Code Block is the source code. After the source code is running. The code will be changed (See the 2nd Code Block).

I want the class(i.e. 'even' and 'odd') of tag is only displayed in the 'table1'. However, currently a nest table (i.e. 'table2') also has 'even' and 'odd' class of each tag.

Can anyone help me out? Thanks in advance.

-----------First Code Block--------------

<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>

-----------2nd Code Block---------------

<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">开发者_JAVA技巧;</tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>

All of the posted answer are almost right..

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

Many browsers automatically add a tbody to your table even if you don't add one yourself. So #table1 > tr will not match because tr is not a direct child of table. Your best bet is to use the above and explicitly add a tbody for those browsers that don't do it for you.

 <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>

http://jsfiddle.net/5ETAD/1/

It should be:

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

To avoid redundant DOM traversal, you could use something like this:

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

You could use the following (notice the greater than sign):

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

This will select only the immediate children tr's.

Use the direct child selector.

Also you can use :even instead of :not(.odd)

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

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

You just need to use proper CSS selectors. Try:

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

jQuery selectors for even/odd rows in a table

精彩评论

关注公众号

热门标签

图文推荐

jQuery selectors for even/odd rows in a table

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：