How to Count Number of Rows and Columns in a Table Using jQuery?
Last Updated :
20 Dec, 2023
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.
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:
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:
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.
Similar Reads
How to add table row in a table using jQuery? In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table
2 min read
How to select all even/odd rows in table using jQuery ? In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ
3 min read
How to Dynamically Add/Remove Table Rows using jQuery? We will dynamically add/remove rows from an HTML table using jQuery. jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc.Adding a rowTo add a r
3 min read
How to Add Edit and Delete Table Row in jQuery ? In this article, we will create an example of how to add, edit and delete table rows in jQuery. For creating this functionality we need to know about the basics of the HTML table, jQuery basic functionality. Table row: An HTML table is a combination of rows and columns. The table row is in the horiz
3 min read
How to find the sixth cell (second row and third column ) of a 3x3 table in jQuery ? In this article, we will see how to get the sixth cell of a 3x3 table in jQuery. To find the nth-child of an element, we can use the nth-child selector of jQuery. Approach: Sixth cell of a 3x3 table can be found using the following jQuery call: $('#table1 tr:nth-child(2) td:nth-child(3)').text(); If
1 min read