In this tutorial we will see how to Count number of Rows in a Table using JQuery. JQuery length property is used for this, which returns number of rows in a table.
Table of Contents
HTML Code
HTML Table Code is given below.
<!DOCTYPE html>
<html>
<head>
<title>Count number of Rows in a Table using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id='table'>
<thead>
<tr>
<th>Instructor</th>
<th>Number</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sara</td>
<td>1221</td>
<td>HTML</td>
</tr>
<tr>
<td>Rose</td>
<td>0808</td>
<td>CSS</td>
</tr>
</tbody>
</table>
<button>Count number of Rows</button>
</body>
</html>
JQuery Code
JQuery Code is given below. JQuery length property is used in this code which returns the number of elements present inside a JQuery object.
In this example length property will return the number of rows present inside the table.
<script>
$(document).ready(function(){
$("button").click(function(){
var count = $("#table tr").length;
alert(count);
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Count number of Rows in a Table using JQuery.