In this article, you will learn how to count the total number of rows in an HTML table using jQuery or javascript. There are various ways to count the number of rows in an HTML table.
Here are some examples to count the number of rows in an HTML table.
How to Count the Number of Columns in an HTML Table Using JQuery or Javascript
In this example, we used the length property to count the number of rows in an HTML table. length property can be used to get the number of elements in any jQuery object.
<!DOCTYPE html>
<html>
<head>
<title>
How to Count Number of Rows in Html Table Using Jquery
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count Number of Rows in a Table Using jQuery
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button">
Total Row Count
</button>
<!-- Script to Count number of rows in a table -->
<script>
$(document).ready(function () {
$("button").click(function () {
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tableId tr").length;
alert("Total Rows in HTML Table: " + rowCount);
});
});
</script>
</center>
</body>
</html>In this example, we used the index() function to count the total number of rows in an HTML table. The index() function is used to return the index of the specified elements with respect to the selector.
Note:
<!DOCTYPE html>
<html>
<head>
<title>
How to Count Number of Rows in Html Table Using Jquery
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count Number of Rows in a Table Using jQuery
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button">
Total Row Count
</button>
<!-- Script to Count number of rows in a table -->
<script>
$(document).ready(function () {
$("button").click(function () {
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tableId tr:last").index() + 1;
alert("Total Rows in HTML Table: " + rowCount);
});
});
</script>
</center>
</body>
</html>
In this example, we use the closet() function to count the total number of rows in an HTML table. the closet() function used to return the first ancestor of the selected element. An ancestor can be a parent, grandparent, great-grandparent, and so on.
<!DOCTYPE html>
<html>
<head>
<title>
How to Count Number of Rows in Html Table Using Jquery
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count Number of Rows in a Table Using jQuery
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button">
Total Row Count
</button>
<!-- Script to Count number of rows in a table -->
<script>
$(document).ready(function () {
$("button").click(function () {
// Select all the rows in the table body
// and returns the total count of rows
// inside a Body
var rowCount = $("#tableId td").closest("tr").length;
alert("Total Rows in HTML Table: " + rowCount);
});
});
</script>
</center>
</body>
</html>
In this example, we used Pure JavaScript to get the count the number of rows in an HTML table.
<!DOCTYPE html>
<html>
<head>
<title>
How to Count Number of Rows in Html Table Using Javascript
</title>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count Number of Rows in a Table Using Javascript
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button" onclick="CountRows()">
Total Row Count
</button>
<!-- Script to Count number of rows in a table -->
<script type="text/javascript">
function CountRows() {
var totalRowCount = 0;
var rowCount = 0;
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
totalRowCount++;
if (rows[i].getElementsByTagName("td").length > 0) {
rowCount++;
}
}
var message = "Total Row Count: " + totalRowCount;
message += "\nTotal Row Count inside Table Body: " + rowCount;
alert(message);
}
</script>
</center>
</body>
</html>
I hope this article will help you to understand how to count the total number of rows in an HTML table using jQuery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments