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


The following HTML Markup consists of an HTML Table and a Button to get count (number) of rows in HTML Table using jQuery.



Html

<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <th style="width: 90px">Customer Id</th>
            <th style="width: 120px">Name</th>
            <th style="width: 90px">Country</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </tbody>
</table>
<br />
<input type="button" id="btnGetCount" value="Count Rows" />

jQuery

<script type="text/javascript" src="http://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: " + totalRowCount;
            message += "\nRow Count: " + rowCount;
            alert(message);
        });
    });
</script>





Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.