How to highlight alternate table row using jQuery ?

How to highlight alternate table row using jQuery ?

Last Updated : 30 May, 2023

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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:

How to highlight alternate table row using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How To Set Alternate Table Row Color Using CSS?

To set alternate table row colors, we can use the :nth-child() pseudo-class in CSS. This technique helps improve the readability of a table by making it easier to differentiate between rows. In this article, we'll cover how to set alternate row colors using the :nth-child() pseudo-class and provide

How to Delete All Table Rows Except First One using jQuery?

To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th

How to add table row in a table using jQuery?

In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table

How to Dynamically Add/Remove Table Rows using jQuery?

We will dynamically add/remove rows from an HTML table using jQuery. jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc.Adding a rowTo add a r

How to select all even/odd rows in table using jQuery ?

In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ