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;"> w3wiki </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>w3wiki</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:
How to Count Number of Rows and Columns in a Table Using jQuery?
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
- By using the length property