Styling alternate rows in HTML table using jQuery

In this post I am going to explain, how we can style the alternate rows of an HTML table using the power of jQuery. We can also do the same using the CSS fully but in case you prefer or are more interested to know, how to do it with jQuery and some CSS, here’s the demo. Let’s say we have a HTML markup like this:

<h3>Table 1</h3>

    <table class="myTable">
        <tr>
            <td>As You Like It</td>
            <td>Comedy</td>
            <td>1600</td>
        </tr>
        <tr>
            <td>All's Well that Ends Well</td>
            <td>Comedy</td>
            <td>1601</td>
        </tr>
        <tr>
            <td>Hamlet</td>
            <td>Tragedy</td>
            <td>1604</td>
        </tr>
        <tr>
            <td>Macbeth</td>
            <td>Tragedy</td>
            <td>1606</td>
        </tr>
        <tr>
            <td>Romeo and Juliet</td>
            <td>Tragedy</td>
            <td>1595</td>
        </tr>
    </table>
    
<h3>Table 2</h3>

    <table class="myTable">
        <tr>
            <td>Hamlet</td>
            <td>Tragedy</td>
            <td>1604</td>
        </tr>
        <tr>
            <td>Macbeth</td>
            <td>Tragedy</td>
            <td>1606</td>
        </tr>
        <tr>
            <td>Romeo and Juliet</td>
            <td>Tragedy</td>
            <td>1595</td>
        </tr>
    </table>
</div>

Now, without any styling being applied for the alternate row, it appears like this:

Original Table

Original Table

And, our desired result is something like this:

Modified Table

Modified Table

The important thing to notice here is that, in case we have multiple tables, we always want our next table first row color to be same as all the tables. So, if we see here, the Table 1 last row has the alternate row color, but still both the tables here starts with the same color.

Now, we can achieve this using CSS & jQuery like this:

CSS:

.alt {
    background-color:#eee;
}

jQuery:

$(document).ready(function () {
    $('.myTable tr:nth-child(odd)').addClass('alt');
});

Explanation:

  1. jQuery code in the first line
    $(document).ready(function () {
    

    Now the above code is used to execute a function when the DOM is fully loaded. And we are calling it here since, we want to apply our styling on the HTML tables after it has been loaded fully. For more information, see the .ready() API documentation..

  2. Code in the second line
    $('.myTable tr:nth-child(odd)').addClass('alt');
    

    Firstly, here the selector  '.myTable tr:nth-child(odd)  means that we want to get all the “odd” numbered tr elements, like 1st, 3rd, 5th, etc. inside the table with a class  myTable . Next, we want to add a class named  alt (shown above) to all those elements.

Demo:

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.

Happy Coding 🙂

Advertisements

2 thoughts on “Styling alternate rows in HTML table using jQuery

  1. you can use directly
    $(‘.myTable tr:odd’).addClass(‘alt’); // this will start with the seccond row
    or
    $(‘.myTable tr:even’).addClass(‘alt’); // this will start with the first row of the table

    in case on the first row you have

    header text or data

    some usual data

    and the header has a different color ( as usually is nice to see ) you can do :
    $(“tr:gt(0):even”).addClass(‘alt’);

    ignore some rows:

    $(“tr:even:not(‘.ignore’)”).addClass(‘alt’); // here will ignore the row with the class ignore

    • Hi Jhon, thanks for your response. Regarding the solution you have provided, it works but not as we would have wanted. If you try it with 2 or more tables, you would be able to see the issue Fiddle Demo. See the first row of Table 1 have white background color, while for the next table its not white. So, for all the tables the first row should start with the same color. I hope you got my point!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s