HTML:
<!DOCTYPE html>
<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: #F36639;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
table, table table td {
border: 0px solid #ccc;
}
</style>
<!--When Get count using javascript-->
<script type="text/javascript">
function CountRowsUsingJavascript() {
var totalRowCount = 0;
var rowCount = 0;
var table = document.getElementById("tblEmployee");
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>
<!--When Get count using jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetCountUsingJquery").click(function () {
var totalRowCount = $("#tblEmployee tr").length;
var rowCount = $("#tblEmployee td").closest("tr").length;
var message = "Total Row Count: " + totalRowCount;
message += "\nRow Count: " + rowCount;
alert(message);
});
});
</script>
</head>
<body>
<table id="tblEmployee" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th style="width: 100px">Employee Id</th>
<th style="width: 120px">Employee Name</th>
<th style="width: 90px">Country</th>
</tr>
<tr>
<td>1</td>
<td>John Cena</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Anurag Soni</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Ragul Sharma</td>
<td>India</td>
</tr>
<tr>
<td>4</td>
<td>Mac Milan</td>
<td>Russia</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="button" id="btnGetCountUsingJavaScript" value="Count Rows Using Javascript" onclick="CountRowsUsingJavascript()" />
<input type="button" id="btnGetCountUsingJquery" value="Count Rows Using Jquery" />
</body>
</html