How to count number of rows in a table using jQuery?

Learn, how to count the number of rows in a given table with the use of jQuery?
Submitted by Pratishtha Saxena, on February 09, 2023

Using .length Property

The length property contains the number of elements in the jQuery Object.

When we need to count the number of rows or columns, etc., the length property of jQuery is used. The element that has to be counted is first selected using an appropriate selector, and the length property is defined for it. This returns the number of occurrences of that particular element and hence the result is an integer.

Syntax:

$('selector').length;

Now, here we want to know the number of rows in a given table. Hence, for this first of all we will provide a selector to select all the rows that we wish to count. This selector will look like - table tr.

This shows that all the <tr> within a <table> have been selected.

Now, the length property will be defined for it, which in return will show the number of rows in that particular table.

Let's have a look at the following example. Here, when the button is clicked, it shows the total number of rows that are present in the given table.

We can also count columns similarly as we have done with the rows. The only thing different will be that instead of <tr>, now we would be specifying <th>.

jQuery example to count number of rows in a table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery: count number of rows in a table</h2>
    <h4>Click the button to get the total number of rows in the following table.</h4>
    <button>Get Rows</button>
    <hr>
    <table id="myTable" border="1" cellpadding="10" cellspacing="1">
      <tr>
        <th>Day</th>
        <th>Date</th>
        <th>Month</th>
        <th>Year</th>
      </tr>
      <tr>
        <td>Monday</td>
        <td>02</td>
        <td>January</td>
        <td>2023</td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td>03</td>
        <td>January</td>
        <td>2023</td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td>04</td>
        <td>January</td>
        <td>2023</td>
      </tr>
      <tr>
        <td>Thursday</td>
        <td>05</td>
        <td>January</td>
        <td>2023</td>
      </tr>
    </table>
    <hr>
    <h4 id="one"></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('h4#one').html('Total Rows = ' + $('table tr').length);
        });
    });
  </script>
</html>

Output:

Example: How to count number of rows in a table using jQuery?

How to uncheck a radio button using JavaScript and jQuery?

jQuery Data vs Attr

Comments and Discussions!

Load comments ↻