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>

Running the above code, the even/odd class has been added to the nested table, like:

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

What change should I do to make even/odd class are not in the nested table, the output as below:

<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

Give an id to your outer table, then use the child selector:

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

The child selector selects only direct children, rather than all descendants (your current selector simply selects all td elements in the DOM, regardless of which table they are in).