In this article I will explain with an example, how to get count (number) of rows in HTML Table using 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 jQuery.
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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads