In the following blog post, I have demonstrated how to get the count (number) of rows in Html table using javascript and get number of rows in table jquery. Keep reading on How to convert html page to PDF using JavaScript, Remove Last Character from String jQuery.
Get Count (Number) of Rows in HTML Table using jQuery
The following example shows, an Html table and a Button to get the count (number) of rows in Html using jQuery. In the document.ready() we have assigned a jQuery click event handler for a Button. When we click on the button the total count of the number of rows with a header row and the count of the number of all rows except the First (Header) row in HTML Table is determined using jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th {
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
table, table table td {
border: 0px solid #ccc;
}
</style>
</head>
<body>
<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th style="width: 90px">Id</th>
<th style="width: 120px">Name</th>
<th style="width: 90px">Country</th>
</tr>
<tr>
<td>1</td>
<td>Bobby</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>RaviK</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Adam</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Albert</td>
<td>UK</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="button" id="btnGetCount" value="Count Rows" />
<script type="text/javascript" src="https://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 (with header): " + totalRowCount;
message += "\nRow Count (without header): " + rowCount;
alert(message);
});
});
</script>
</body>
</html>Conclusion
I hope you liked this article on javascript table row count. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Hi
Can the numbers or rows display without pressing any button?
I got a list for work in and I will like the count to be displayed at the top without having to press any button
Could I have total work and work in progress