Count number of Rows in a Table using JQuery

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

Check Demo

Video Tutorial

Watch video tutorial on how to Count number of Rows in a Table using JQuery.