How to Count Number of Rows and Columns in a Table Using jQuery?

Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery.

Approach: The length property is used to count the number of rows and columns in an HTML table using jQuery. The selectors used for finding the number of rows and columns in an HTML table are:

  • To count the number of rows, the “#Table_Id tr” selector is used. It selects all the <tr> elements in the table. This includes the row that contains the heading of the table. The length property is used on the selected elements to get the number of rows.
  • To count the number of columns, the “#Table_Id tr th” selector is used. It selects all the number of <th> elements nested inside <tr> elements in the table. The length property is used on the selected elements to get the number of columns.

Example 1: In this example, the number of rows is counted.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  <head
    <title
      Count Number of Rows and Columns in 
      a Table Using jQuery.
    </title
  
    <script src
    </script
  </head
  
  <body
    <center>     
      <h1 style = "color:green;"
        GeeksForGeeks 
      </h1
  
      <strong
        Count Number of Rows in 
        a Table Using jQuery
      </strong
  
      <br><br
  
      <table id="Table_id" border="1" width="140">
        <thead>
  
          <tr style = "background:green;"
            <th>S.No</th
            <th>Title</th
            <th>Geek_id</th
          </tr
        </thead>
        <tbody>
          <tr
            <td>Geek_1</td
            <td>GeekForGeeks</td
            <td>Geek_id_1</td
          </tr
          <tr
            <td>Geek_2</td
            <td>GeeksForGeeks</td
            <td>Geek_id_2</td
          </tr
        </tbody>
      </table
      <br
  
      <button type="button"
        Count Rows 
      </button
  
      <!-- Script to Count number of rows in a table -->
      <script>
        $(document).ready(function(){
          $("button").click(function(){
              
            // Select all the rows in the table
            // and get the count of the selected elements
            var rowCount = $("#Table_id tr").length;
            alert(rowCount); 
          });
        });
      </script
    </center
  </body
</html>                     

chevron_right


Output:

  • Before clicking on the button:



  • After clicking on the button:

Example 2: In this example, the number of columns is counted.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  <head
    <title
      Count Number of Rows and Columns in 
      a Table Using jQuery.
    </title
  
    <script src
    </script
  </head
  
  <body
    <center>     
      <h1 style = "color:green;"
        GeeksForGeeks 
      </h1
  
      <strong
        Count Number of Columns in 
        a Table Using jQuery
      </strong
  
      <br><br
  
      <table id="Table_id" border="1" width="140">
        <thead>
  
          <tr style = "background:green;"
            <th>S.No</th
            <th>Title</th
            <th>Geek_id</th
          </tr
        </thead>
        <tbody>
          <tr
            <td>Geek_1</td
            <td>GeekForGeeks</td
            <td>Geek_id_1</td
          </tr
          <tr
            <td>Geek_2</td
            <td>GeeksForGeeks</td
            <td>Geek_id_2</td
          </tr
          <tr
            <td>Geek_3</td
            <td>GeeksForGeeks</td
            <td>Geek_id_3</td
          </tr
        </tbody>
      </table
      <br
  
      <button type="button"
        Count Columns 
      </button
  
      <!-- Script to Count Number of columns in a table -->
      <script>
        $(document).ready(function(){
          $("button").click(function(){
              
            // Select all the columns in the table
            // and get the count of the selected elements
            var colCount = $("#Table_id tr th").length;
            alert(colCount); 
          });
        });
      </script
    </center
  </body
</html>                     

chevron_right


Output:

  • Before clicking on the button:

  • After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.