Question

This is usually a very straight forward thing to do, so before you down vote me for such a question hear me out 🙂

My problem is not selecting the elements and adding the class, it’s that I want the alternate class to be added to even or odd rows relative to that table.

Right now I am using this:

jQuery(document).ready(function(){

jQuery('table.rep tbody > tr td:first-child').addClass('composer');
jQuery('table.rep tbody > tr td:last-child').addClass('pieces');
jQuery('table.rep tbody > tr:odd').addClass('alt');

});

The problem is that jQuery is selecting all of the rows from all of the tables with the “rep” class and then adding the “alt” class to the odd rows from that set.

Like I said, I want to have it apply the class to the even/odd rows relative to each table, so the first row would always be styled the same way. As it is using the code above, the first rows can be either alt/normal based on how many rows are in the previous table.

I was thinking of somehow using the .each() function, but after looking through the jQuery docs, I haven’t been able to find out how to achieve my desired result.

I’m thinking it might look something like this:

jQuery('table.rep').each(function(){
    /* select/filter odd rows from this set and add alt class */
});

So my question is if .each() can be used like that and if so, how to drill down into the results of each iteration and make it do what I want.

Answer 1

Here you go..! Always remember that $(…).length is key to find out how may elements are in your filter or trap… 🙂

Javascript:

jQuery(document).ready(function()
{
    $('table.rep tbody > tr td:first-child').addClass('composer');
    $('table.rep tbody > tr td:last-child').addClass('pieces');
    $('table.rep').each(function()
    {
       //alert($(this).children('tbody').children(':odd').length)
       $(this).children('tbody').children(':odd').addClass('alt');
    });

});

HTML

<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>

    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>

CSS

.composer {
    color:blue;
}
.pieces {
    color:green;
}
.alt {
    background-color:#ddd;
}
body {
    font-family:tahoma
}
.rep td {
    padding:2px;
}

I could have avoided adding HTML but than in order to make this post (answer) self-contained – I am adding it here.

You can view demo here on jsfiddle: http://jsfiddle.net/dharmavir/HfwqH/