Get Count (Number) of Rows in HTML Table using JavaScript and jQuery

In the following blog post, I have demonstrated how to get count (number) of rows in Html table using javascript and jQuery. Keep reading on How to convert html page to PDF using JavaScript, Remove Last Character from String jQuery

Get Count (Number) of Rows in HTML Table using JavaScript

In the following example shows, an Html table and a Button to get count (number) of rows in Html using JavaScript. When you click on the button then CountRows() javascript function is executed. The total count of rows in the HTML table is calculated by counting all the HTML TR elements with the header row. Secondly, we count the number of all rows except the first header row in the HTML table without the header row.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

            table th {
                background-color: #B8DBFD;
                color: #333;
                font-weight: bold;
            }

            table th, table td {
                padding: 5px;
                border: 1px solid #ccc;
            }

            table, table table td {
                border: 0px solid #ccc;
            }
    </style>
</head>
<body>
    <table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <th style="width: 90px">Id</th>
                <th style="width: 120px">Name</th>
                <th style="width: 90px">Country</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Bobby</td>
                <td>United States</td>
            </tr>
            <tr>
                <td>2</td>
                <td>RaviK</td>
                <td>India</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Adam</td>
                <td>France</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Albert</td>
                <td>UK</td>
            </tr>
        </tbody>
    </table>
    <br />
    <br />
    <input type="button" id="btnGetCount" value="Count Rows" onclick="CountRows()" />
    <script type="text/javascript">
        function CountRows() {
            var totalRowCount = 0;
            var rowCount = 0;
            var table = document.getElementById("tblCustomers");
            var rows = table.getElementsByTagName("tr")
            for (var i = 0; i < rows.length; i++) {
                totalRowCount++;
                if (rows[i].getElementsByTagName("td").length > 0) {
                    rowCount++;
                }
            }
            var message = "Total Row Count (with header): " + totalRowCount;
            message += "\nRow Count (without header): " + rowCount;
            alert(message);
        }
    </script>
</body>
</html>

Get Count (Number) of Rows in HTML Table using jQuery

In the following example shows, an Html table and a Button to get count (number) of rows in Html using jQuery. In the document.ready() we have assigned a jQuery click event handler for a Button. When we click on the button the total count of the number of rows with a header row and the count of the number of all rows except the First (Header) row in HTML Table is determined using jQuery.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

            table th {
                background-color: #B8DBFD;
                color: #333;
                font-weight: bold;
            }

            table th, table td {
                padding: 5px;
                border: 1px solid #ccc;
            }

            table, table table td {
                border: 0px solid #ccc;
            }
    </style>
</head>
<body>
    <table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <th style="width: 90px">Id</th>
                <th style="width: 120px">Name</th>
                <th style="width: 90px">Country</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Bobby</td>
                <td>United States</td>
            </tr>
            <tr>
                <td>2</td>
                <td>RaviK</td>
                <td>India</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Adam</td>
                <td>France</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Albert</td>
                <td>UK</td>
            </tr>
        </tbody>
    </table>
    <br />
    <br />
    <input type="button" id="btnGetCount" value="Count Rows" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGetCount").click(function () {
                var totalRowCount = $("#tblCustomers tr").length;
                var rowCount = $("#tblCustomers td").closest("tr").length;
                var message = "Total Row Count (with header): " + totalRowCount;
                message += "\nRow Count (without header): " + rowCount;
                alert(message);
            });
        });
    </script>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on how to get the table row count. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.