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
JavaScript get row count of an HTML table
Tables are a common way to organize and display data in HTML. If you're working with tables dynamically in JavaScript, you might need to count the rows in an HTML table for various purposes, such as validation, manipulation, or displaying statistics. In this article, we will demonstrate how to retrieve the row count of an HTML table using JavaScript.
We will use the rows property to access the row count through rows.length, and also show how to count rows in specific table sections like <tbody>.
Understanding the rows Property
The rows property in JavaScript provides access to all <tr> elements within a table or table section:
-
table.rows - Returns a collection of all
<tr>elements in the entire table, including rows from<thead>,<tbody>, and<tfoot> -
tbody.rows - Returns only the rows within a specific
<tbody>section - rows.length - Gives the total count of rows in the collection
Methods to Get Row Count
Following are the different approaches to get the row count of an HTML table:
Using table.rows.length (All Rows)
The rows property of an HTML table element provides a collection of all rows in the table, including header, body, and footer rows.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Row Count</title>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer Row</td>
</tr>
</tfoot>
</table>
<button onclick="getRowCount()">Get Total Row Count</button>
<p id="result"></p>
<script>
function getRowCount() {
// Get the table element
const table = document.getElementById("myTable");
// Get the total row count (includes thead, tbody, tfoot)
const totalRows = table.rows.length;
// Display the result
document.getElementById("result").innerHTML = `Total Rows: ${totalRows}`;
}
</script>
</body>
</html>
Output
When you click the button, it will display: Total Rows: 4 (1 header + 2 body + 1 footer row)
Counting Rows in Specific Sections
If you want to count rows in a specific section like <tbody> only, you can target that section directly using DOM selectors.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tbody Row Count</title>
</head>
<body>
<table id="employeeTable" border="1">
<thead>
<tr>
<th>Employee</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineering</td>
</tr>
<tr>
<td>Bob</td>
<td>Marketing</td>
</tr>
<tr>
<td>Charlie</td>
<td>Sales</td>
</tr>
</tbody>
</table>
<button onclick="getTbodyRowCount()">Get Data Rows Count</button>
<p id="tbodyResult"></p>
<script>
function getTbodyRowCount() {
// Get the tbody element specifically
const tbody = document.querySelector("#employeeTable tbody");
// Get the number of rows in the tbody section only
const tbodyRows = tbody.rows.length;
// Display the result
document.getElementById("tbodyResult").innerHTML = `Data Rows in tbody: ${tbodyRows}`;
}
</script>
</body>
</html>
Output
When you click the button, it will display: Data Rows in tbody: 3 (only the data rows, excluding header)
Comparison of Methods
| Method | What it counts | Use case |
|---|---|---|
table.rows.length |
All rows (thead + tbody + tfoot) | Total table size |
tbody.rows.length |
Only data rows in tbody | Counting actual data entries |
thead.rows.length |
Only header rows | Counting header structure |
Common Use Cases
- Data validation - Check if table has minimum required rows
- Pagination - Calculate pages based on row count
- Statistics - Display "Showing X of Y records"
- Dynamic operations - Add/remove rows based on current count
Conclusion
Use table.rows.length to count all rows in a table, or tbody.rows.length to count only data rows. Choose the method based on whether you need header and footer rows included in your count.
5K+ Views
