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=
</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>
$(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=
</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>
$(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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...