Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to count number of rows in a table with jQuery?
Counting the number of rows in a table is a common requirement in web development. jQuery provides several methods to count table rows efficiently. In this tutorial, we'll learn how to count table rows using jQuery's .length property.
Basic Method to Count Table Rows
The simplest way to count table rows is by using jQuery's selector to target all tr elements within a table and then use the .length property to get the count.
Example
Here's a complete example that demonstrates how to count table rows −
<!DOCTYPE html>
<html>
<head>
<title>Count Table Rows with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
table, th, td {
border: 2px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
table {
margin: 20px auto;
}
h2 {
text-align: center;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
}
#result {
text-align: center;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body>
<h2>Employee Table</h2>
<table id="employeeTable">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>DEPARTMENT</th>
</tr>
<tr>
<td>John Doe</td>
<td>35</td>
<td>Engineering</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Marketing</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>42</td>
<td>Sales</td>
</tr>
<tr>
<td>Sarah Wilson</td>
<td>31</td>
<td>HR</td>
</tr>
</table>
<button type="button" id="countBtn">Count All Rows</button>
<button type="button" id="countDataBtn">Count Data Rows Only</button>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
// Count all rows including header
$("#countBtn").click(function() {
var totalRows = $('#employeeTable tr').length;
$("#result").html("Total rows (including header): " + totalRows);
});
// Count only data rows (excluding header)
$("#countDataBtn").click(function() {
var dataRows = $('#employeeTable tr').length - 1;
$("#result").html("Data rows only: " + dataRows);
});
});
</script>
</body>
</html>
Different Methods to Count Rows
Here are various jQuery selectors you can use to count table rows based on your specific needs −
// Count all rows in a table
var totalRows = $('table tr').length;
// Count rows in a specific table by ID
var specificTableRows = $('#myTable tr').length;
// Count only data rows (excluding header)
var dataRows = $('table tr:not(:first)').length;
// Count rows in table body only
var bodyRows = $('table tbody tr').length;
// Count rows with specific class
var classRows = $('table tr.data-row').length;
The $('table tr').length selector finds all <tr> elements within any table and returns their count. You can make it more specific by using table IDs, classes, or targeting specific parts of the table like tbody or thead.
This approach is useful for dynamic tables where you need to track the number of rows for pagination, validation, or displaying statistics to users.
1K+ Views
