Skip to content
Related Articles

Related Articles

How to Count Number of Rows and Columns in a Table Using jQuery?
  • Last Updated : 16 Jul, 2020

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




<!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>                     

Output:

  • Before clicking on the button:



  • After clicking on the button:

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

HTML




<!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>                     

Output:

  • Before clicking on the button:

  • After clicking on the button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :