Open In App

How to highlight alternate table row using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 the addClass() method is used to set the style of the alternative rows. 

Syntax: 

$(tr:nth-child(2n)").addClass("GFG");

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

Example: In this example, we will create a table using jQuery.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        How to highlight alternate
        table row using jQuery?
    </title>
    <script src=
    </script>
    <style>
        table {
            margin: 0 auto;
        }
        tr,
        th,
        td {
            border: 2px solid black;
            padding: 20px 50px;
        }
        th {
            background-color: green;
        }
        .GFG {
            background: rgb(145, 145, 145);
        }
    </style>
    <script>
        $(document).ready(function () {
            $("table tbody tr:nth-child(2n)").addClass("GFG");
        });
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to highlight alternate
        table row using jQuery?
    </h3>
    <table>
        <thead>
            <tr>
                <th>Sl.No</th>
                <th>Title</th>
                <th>Geek_id</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>HTML</td>
                <td>Markup Language</td>
            </tr>
            <tr>
                <td>02</td>
                <td>CSS</td>
                <td>Cascading Style</td>
            </tr>
            <tr>
                <td>03</td>
                <td>JavaScript</td>
                <td>Scripting Language</td>
            </tr>
            <tr>
                <td>04</td>
                <td>Bootstrap</td>
                <td>Framework</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


Output:



Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads