Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to select all even/odd rows in a table using jQuery?
Working with tables is a very common task when it comes to developing web applications. And sometimes we may need to select a specific row from a table. Let’s say we want all the even or odd rows, but how to do that? In this article, we will see how to select all even/odd rows in a table with jQuery.
Approaches to select all even/odd rows in the table
To select all even rows in a table using jQuery, we have different approaches to achieve this task. Below we have discussed the three approaches that are commonly used in doing this −
Approach 1: Using the :even/:odd selector
This approach is one of the easiest and most commonly used for selecting even or odd rows in a table. Here we use the :even & :odd selectors.
Syntax
For all even rows is given below:
$('table tr:even').addClass('even');
For all odd rows is given below −
$('table tr:odd').addClass('odd');
Example
In this example, we have created a "Toggle Even" button that when clicked executes a jQuery function that uses the :even selector to select all even rows and add the "even" class to their elements for changing the styles which in our case is background color to green and text color to white. Similarly, when the "Toggle Odd" button is clicked, it executes the :odd selector that selects all odd rows and adds the "odd" class to their elements for changing the styles which in our case is the background color to blue and text color to white.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 1: Using the :even/:odd Selector
$('#toggleEvenRow').on('click', function() {
$('table tr:even').addClass('even-class');
});
$('#toggleOddRow').on('click', function() {
$('table tr:odd').addClass('odd-class');
});
</script>
</body>
</html>
Approach 2: Using the .filter() method
The .filter() method is used to filter a set of elements based on some condition in javascript.
Syntax
The syntax for selecting all odd rows is given below −
$('table tr').filter(':even').addClass('even');
The syntax for selecting all odd rows is given below −
$('table tr').filter(':odd).addClass(odd);
Example
In this example, we have created a "Toggle Even" button that when clicked executes a jQuery function that uses the .filter(':even') method to select all even rows and add the "even" class to their elements for changing the styles which in our case is background color to green and text color to white. Similarly, when the "Toggle Odd" button is clicked, it executes the .filter(':odd') method that selects all odd rows and adds the "odd" class to their elements for changing the styles which in our case is the background color to blue and text color to white.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 2: Using the .filter() Method
$('#toggleEvenRow').on('click', function() {
$('table tr').filter(':even').addClass('even-class');
});
$('#toggleOddRow').on('click', function() {
$('table tr').filter(':odd').addClass('odd-class');
});
</script>
</body>
</html>
Approach 3: Using a Loop in jQuery
In this approach, we are using a loop to select even or odd rows in a table which iterates over all the rows given in the table and then applies the styles to both even or odd rows based on their index.
Syntax
The syntax for selecting all even rows is given below −
$('table tr').each(function(index) {
if (index % 2 === 0) {
$(this).addClass('even');
}
});
The syntax for selecting all odd rows is given below −
$('table tr').each(function(index) {
if (index % 2 !== 0) {
$(this).addClass('odd');
}
});
Example
When the "Toggle Even" button is clicked, the .each() method iterates through each table row, and the $(this) selector adds the "even" class to the even-indexed rows. Similarly, when the "Toggle Even" button is clicked, the .each() method iterates through each table row, and the $(this) selector then adds the "odd" class to the odd-indexed rows.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 3: Using a Loop
$('#toggleEvenRow').on('click', function() {
$('table tr').each(function(index) {
if (index % 2 === 0) {
$(this).addClass('even-class');
}
});
});
$('#toggleOddRow').on('click', function() {
$('table tr').each(function(index) {
if (index % 2 !== 0) {
$(this).addClass('odd-class');
}
});
});
</script>
</body>
</html>
Conclusion
To select all even/odd rows in a table with jQuery, there are multiple approaches that can be used. In this article, we have discussed three different approaches, and choosing the right approach depends on the specific requirements of the web application. Overall, jQuery is a versatile and easy-to-use tool for web developers with a wide range of features to streamline the process of web development.
439 Views
