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.
<!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
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: