Skip to content
Related Articles

Related Articles

How to highlight alternate table row using jQuery ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 24 Mar, 2021

In this article, we will set the highlight on an alternative table row using jQuery. The :nth-child(2n) selector is used to select the alternative row and addClass() method is used to set the style the alternative rows. 



Here, we will create a simple table using <table> tag. The <thead> and <tbody> tags are used to create heading and body elements of table. We use some CSS properties to set the styles. 



<!DOCTYPE html>
        How to highlight alternate
        table row using jQuery?
    <script src=
        table {
            margin: 0 auto;
        td {
            border: 2px solid black;
            padding: 20px 50px;
        th {
            background-color: green;
        .GFG {
            background: rgb(145, 145, 145);
        $(document).ready(function () {
            $("table tbody tr:nth-child(2n)").addClass("GFG");
<body style="text-align: center;">
    <h1 style="color:green;">
        How to highlight alternate
        table row using jQuery?
                <td>Markup Language</td>
                <td>Cascading Style</td>
                <td>Scripting Language</td>


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!