Question

I have created this fiddle for problem as you will see there are three tables having zebra strip using jQuery.

Table 1 is showing in correct form as it start tr index from 0 as even. Table 2 is continuing from last table and it is showing 1st row as white instead of dark. I think it is happening due to it is continuing from last table’s tr index.

HTML:

<table>
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>​

JavaScript:

$('table').find('tr:even').css('background','#d0d0d0');

Fiddle: http://jsfiddle.net/daljir/gryh5/

Answer 1

You can use find() to ‘work’ with each table separately:

$("table").find("tr:even").css("background", "#d0d0d0");

DEMO: http://jsfiddle.net/gryh5/1/