Highlight Alternate Table Row using JQuery

In this tutorial we will see how to Highlight Alternate Table Row using JQuery. JQuery :nth-child() selector and .css() method is used for this purpose.

Table of Contents

HTML Code

HTML Table Code is given below.

<table>

    <thead>
        <tr>
            <th>Instructor</th>
            <th>Number</th>
            <th>Class</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Sara</td>
            <td>1221</td>
            <td>HTML</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>0808</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Rambo</td>
            <td>PHP</td>
        </tr>
        <tr>
            <td>James</td>
            <td>3454</td>
            <td>JQuery</td>
        </tr>
        <tr>
            <td>Jake</td>
            <td>7685</td>
            <td>Java</td>
        </tr>
    </tbody>

</table>

JQuery Code

JQuery Code is given below. JQuery :nth-child() selector is used to select the alternate table rows.

The Jquery :nth-child(n) selector selects all elements that are the nth child of the parent element.

:nth-child(2n) will only select the alternate rows whose position is a multiple of 2.

Then css is applied to the selected rows using .css() method of JQuery.

<script>
$(document).ready(function(){
$("table tbody tr:nth-child(2n)").css('background-color','yellow');
});
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Highlight Alternate Table Row using JQuery.