Question

I have this table:

<tbody>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>

<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>

<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>

<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>

...
</tbody> 

and it keeps going…
I want on doc ready to add class odd and even depends on their position. To end up something like this:

<tbody>
    <tr class="odd">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr class="even">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr class="odd">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr class="even">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    ...
    </tbody>

What is the way to achieve this? Do I have to count how many tables I have and add classes depends on their position? It doesn’t sound safe/proper way to me.

Answer 1

If you don’t need a pure CSS solution, go with jQUery and use :odd / :even selectors. Otherwise Sirko’s solution is better. (Note that nth-child method would not run on IE8 and below)

​$("table tr:odd").addClass("odd");
​$("table tr:even").addClass("even");