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
Video Tutorial
Watch video tutorial on how to Highlight Alternate Table Row using JQuery.