Home/ Questions/Q 6127795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:33:11+00:00

The code in the first Code Block is the source code. After the source

  • 0

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"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0