Open In App

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

Last Updated : 20 Dec, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery. There are a few methods available in jQuery to count the number of rows and columns in an HTML table.

Table of Content

By iterating through the rows and columns

We can select the rows and columns of an HTML table using the jQuery selector and then iterate through each one of them using the .each() method to count the number of rows and columns.

Syntax:

$('table_row_or_column_selector').each(()=>{});

Example: The below example will explain how you can count rows and columns by iterating through each one of them.

HTML 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Count Number of Rows and
        Columns ina Table Using jQuery.
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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>

        <p id="result"></p>
        <!-- Script to Count number of rows in a table -->
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    let rows = 0;
                    let cols = 0;
                    // Counting rows
                    $("#Table_id tr").each(()=>{
                        rows++;
                    });
                    // Counting columns
                    $("#Table_id tr th").each(()=>{
                        cols++;
                    });
                    // Showing result on the user screen
                    $('#result').html(`Number of Rows: ${rows} <br/>
                                    Number of Columns: ${cols}`)
                });
            }); 
        </script>
    </center>
</body>

</html>

Output:

countRowColGIF

By using the length property

The number of rows and columns can be counted using the length property by selecting rows and columns of the table as selected in last example and directly use the length property on them instead of iteration using the each() method.

Syntax:

$('table_rows_or_column_selector').length;

Example 1: The below example will illustrate how you can use the length property to count number of rows and columns of an HTML table.

HTML 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Count Number of Rows and
        Columns ina Table Using jQuery.
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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 and Columns
        </button>

        <p id="result"></p>
        <!-- Script to Count number of rows in a table -->
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    let rows = $("#Table_id tr").length;
                    let cols = $("#Table_id tr th").length; 
                    $('#result').html(`Number of Rows: ${rows} <br/>
                                    Number of Columns: ${cols}`)
                });
            }); 
        </script>
    </center>
</body>

</html>

Output:

countRowColGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.


Next Article
How to Add Edit and Delete Table Row in jQuery ?

S
SHUBHAMSINGH10
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox