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 the last row of a table using jQuery?
jQuery is a widely used tool in JavaScript that simplifies the process of manipulating HTML documents and doing other tasks related to website development.
In this article, we will see how to select the last row of a table using jQuery. Along with this, we’ll know different approaches to performing this task.
Why Selecting the Last Row of a Table is Important?
Let's see why we need to select the last of a table and why it becomes an important task. So basically when developers need to change or modify their new data into the existing table dynamically, it ensures that the data that is added newly can be modified to the end of the table. Another feature in selecting the last row is that sometimes developers need to perform some calculations that are to be done in the last row of the table. It become also important when the developers want to style the classes that are existing in the last row like changing background colors, text appearance, etc.
Different methods to select the last row of a table in jQuery
Selecting the last row can be achieved in different ways, some of which are discussed below along with their definitions, syntax, and examples. Let’s discuss each one of that methods one by one.
Approach 1: Using the last() method
Our first approach to selecting the last row of a table using jQuery is with the help of the last() method. This method is used for selecting the last element of a set of matched elements.
This method is very easy to use, here we first select all the rows of the table with the help of find() method. After this, we use the last() method to the set of matched elements to select the last row. Let’s first see its syntax and then move to its complete example −
Syntax
$("#tpTable").find("tr").last(
.css("background-color", "green");
Example
In this example, we have created a table with id=”tpTable” and a button with its id=”change-row”. To select the last row, we are going to take the help of the button that we have created. On the click of a button, the last() method will invoke and will change the background color of the last row to green.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<table id="tpTable">
<thead>
<tr>
<th>S.no</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Computer Science</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Maths</td>
<td>95</td>
</tr>
<tr>
<td>3</td>
<td>Science</td>
<td>89</td>
</tr>
<tr>
<td>4</td>
<td>English</td>
<td>98</td>
</tr>
</tbody>
</table>
<button id="change-row">Select</button>
<script>
$(document).ready(function () {
$('#change-row').click(function () {
$('#tpTable').find('tr').last().css('background-color', 'green');
});
});
</script>
</body>
</html>
Output
Approach 2: Using the eq() method
Our second approach to selecting the last row of a table using jQuery is with the help of the eq() method. This method is used for selecting the last element of a set of matched elements based on the index.
This method is very easy to use, here we first check the index of the last row. For this, we use the length property of the set of matched elements and finally we select the last row using the eq() method. Let’s first see its syntax and then move to its complete example −
Syntax
$("#tpTable").find("tr")
.eq($("#tpTable").find("tr").length - 1)
.css("background-color", "green");
Example
In this example, we have created a table with id=”tpTable” and a button with its id=”change-row”. To select the last row, we are going to take the help of the button that we have created. At the click of a button, the eq() method will check the index of the last row and after completing it, it will change the background color of the last row to blue.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<table id="tpTable">
<thead>
<tr>
<th>S.no</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Computer Science</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Maths</td>
<td>95</td>
</tr>
<tr>
<td>3</td>
<td>Science</td>
<td>89</td>
</tr>
<tr>
<td>4</td>
<td>English</td>
<td>98</td>
</tr>
</tbody>
</table>
<button id="change-row">Select</button>
<script>
$(document).ready(function () {
$('#change-row').click(function () {
var numRows = $('#tpTable').find('tr').length;
$('#tpTable').find('tr').eq(numRows - 1).css('background-color', 'blue');
});
});
</script>
</body>
</html>
Output
Approach 3: Using the :last() selector
Our last approach to selecting the last row of a table using jQuery is with the help of the :last() selector. Note that this method is kind of similar to the last method but the difference is that it is a more concise method used for selecting the last element of a set of matched elements.
This method is very easy to use, here we first select the table using the jQuery selector "$("#tpTable")". Let’s first see its syntax and then move to its complete example −
Syntax
$("#tpTable tr:last")
.css("background-color", "green");
Example
In this example, we have created a table with id=”tpTable” and a button with its id=”change-row”. To select the last row, we are going to take the help of the button that we have created. On the click of a button, the :last() selector will invoke the last “tr” to change the background color of the last row to orange.
<!DOCTYPE html>
<html>
<head>
<title>Tutorialspoint</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<table id="tpTable">
<thead>
<tr>
<th>S.no</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Computer Science</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Maths</td>
<td>95</td>
</tr>
<tr>
<td>3</td>
<td>Science</td>
<td>89</td>
</tr>
<tr>
<td>4</td>
<td>English</td>
<td>98</td>
</tr>
</tbody>
</table>
<button id="change-row">Select</button>
<script>
$(document).ready(function () {
$('#change-row').click(function () {
$("#tpTable tr:last").css("background-color", "orange");
});
});
</script>
</body>
</html>
Output
Conclusion
Selecting the last row of a table using jQuery is an easy task. This allows us to modify newly added data dynamically, perform calculations, etc. Apart from this, it also enables developers to style the last row, like changing their background, text colors, or appearances. We saw three different approaches to selecting the last row of a table using jQuery, which include the last() method, the eq() method, and the :last() selector. All of the methods are easy to use and help in achieving various tasks related to web app development effectively and efficiently.
2K+ Views
To Continue Learning Please Login