In this article I will explain with an example, how to get count (number) of rows in HTML Table using JavaScript and jQuery.
This article will explain how to get the total count of the number of rows in HTML Table and also how to get the count of the number of all rows except the First (Header) row in HTML Table using JavaScript and jQuery.
Get Count (Number) of Rows in HTML Table using JavaScript
The following HTML Markup consists of an HTML Table and a Button to get count (number) of rows in HTML Table using JavaScript.
When the Button is clicked, the CountRows JavaScript function is executed. Inside the CountRows JavaScript function, first the HTML Table is referenced using JavaScript and then a loop is executed over the HTML Table rows (TR element).
Total count of the number of rows
The total count of the number of rows in HTML Table is calculated by counting all the HTML TR elements.
Count of the number of all rows except the First (Header) row
The count of the number of all rows except the First (Header) row in HTML Table is calculated by counting only those HTML TR elements which contain HTML TD (Cell) element and skipping all the HTML TR elements which contain HTML TH (Header Cell) element.
<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th style="width: 90px">Customer Id</th>
<th style="width: 120px">Name</th>
<th style="width: 90px">Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="button" id="btnGetCount" value="Count Rows" onclick = "CountRows()" />
<script type="text/javascript">
function CountRows() {
var totalRowCount = 0;
var rowCount = 0;
var table = document.getElementById("tblCustomers");
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 += "\nRow Count: " + rowCount;
alert(message);
}
</script>
Get Count (Number) of Rows in HTML Table using jQuery
The following HTML Markup consists of an HTML Table and a Button to get count (number) of rows in HTML Table using jQuery.
Inside the document ready event handler, the Button has been assigned a jQuery click event handler. When the Button is clicked, the total count of the number of rows and the count of the number of all rows except the First (Header) row in HTML Table is determined using jQuery.
Total count of the number of rows
The total count of the number of rows in HTML Table is determined by selecting all the HTML TR elements using jQuery.
Count of the number of all rows except the First (Header) row
The count of the number of all rows except the First (Header) row in HTML Table is determined by selecting only those HTML TR elements which contain HTML TD (Cell) element and skipping all the HTML TR elements which contain HTML TH (Header Cell) element.
<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th style="width: 90px">Customer Id</th>
<th style="width: 120px">Name</th>
<th style="width: 90px">Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="button" id="btnGetCount" value="Count Rows" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetCount").click(function () {
var totalRowCount = $("#tblCustomers tr").length;
var rowCount = $("#tblCustomers td").closest("tr").length;
var message = "Total Row Count: " + totalRowCount;
message += "\nRow Count: " + rowCount;
alert(message);
});
});
</script>
Screenshot
![Get Count (Number) of Rows in HTML Table using JavaScript and jQuery]()
Demo
Downloads
