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

In the following blog post, I have demonstrated how to get the count (number) of rows in Html table using javascript and get number of rows in table 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 jQuery

The following example shows, an Html table and a Button to get the 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 javascript 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.

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

Reader Interactions

Comments

Leave a Reply Cancel reply