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

12 Aug, 2021
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 display from the large data set. This enables us to quickly review the table at a glance. We can achieve the same by selecting the odd or even rows using tr: odd or tr: even selectors in the table. The row index starts from 0 in the HTML tables. We will use jQuery for selecting either of the rows by clicking the button. 
In order to use jQuery in the HTML file, we will add the below syntax inside the <head> tag.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
Syntax for selecting odd rows:
$("table tr:odd").css({"property":"value",
                           "property": "value"});
Syntax for selecting even rows:
$("table tr:even").css({"property":"value",
                           "property": "value"});
 
Approach:
Design a table that will contain the data. Use the required styling properties to highlight the different rows in order to differentiate the row data.
 Use “tr: odd” to select the odd data & use “tr: even” to select the even data in the row.
Example: In this step, we will create a table having the table row & table column & will use the above all syntax for the selection of rows. 
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible"           content="IE=edge" />    <meta name="viewport"           content="width=device-width,                    initial-scale=1.0" />    <title>Geeks for Geeks</title>          <!-- Including jQuery  -->    <script      src="https://code.jquery.com/jquery-3.6.0.min.js"      letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="      crossorigin="anonymous">    </script>          <style>      h1 {        color: #006600;      }        button {        color: white;        background-color: #006600;        width: auto;        height: 30px;      }        body {        text-align: center;      }        div {        margin: 10px;        height: auto;        width: auto;        position: relative;        display: flex;        justify-content: center;        text-align: center;        display: flex;      }        table,      tr,      thead,      td {        border: 5px solid #006600;        border-collapse: collapse;        padding: 10px;      }        thead {        color: #006600;        font-size: 20px;        font-weight: bold;      }    </style>  </head>    <body>    <h1>Geeks For Geeks</h1>      <button id="odd">ODD ROWS</button>    <button id="even">EVEN ROWS</button>      <div>      <table>        <tbody>          <thead>            <td>Index</td>            <td>Col-1</td>            <td>Col-2</td>            <td>Col-3</td>          </thead>          <tr>            <td>1</td>            <td>Column00</td>            <td>Column01</td>            <td>Column02</td>          </tr>          <tr>            <td>2</td>            <td>Column10</td>            <td>Column11</td>            <td>Column12</td>          </tr>          <tr>            <td>3</td>            <td>Column20</td>            <td>Column21</td>            <td>Column22</td>          </tr>          <tr>            <td>4</td>            <td>Column30</td>            <td>Column31</td>            <td>Column2</td>          </tr>        </tbody>      </table>    </div>      <script>      $(document).ready(function () {        $("#odd").click(function () {          $("table tr:odd").css({            "background-color": "#00e673",            color: "white",          });        });        $("#even").click(function () {          $("table tr:even").css({            "background-color": "#b3b3cc",            color: "white",          });        });      });    </script>  </body></html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
jQuery-Methods
jQuery-Questions
jQuery-Selectors
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?