Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to count number of Rows and Column using jQuery
Overview
To count for the number of rows and columns in a table can be calculated by using the “length” property in jQuery. To achieve this solution we will target the HTML <th> element of the table to count the number of columns, to count the number of rows in a table we will target the table <tr> tag. We can also target the element in parent to child form also such as “table tr th” this will target the head of the table for calculating the columns.
Syntax
The syntax used to count the number of rows and columns in a table is −
$(selector).length;
Algorithm
Step 1 − Add the jQuery Content Delivery Network (CDN) link to our HTML boilerplate code.
Step 2 − Create a HTML table using the <table> tag, and insert the columns of table head using <thead>, <th> tag. To insert the data into the table and in a row use <tr> tag follow up with <td> tag which will insert the data.
<table>
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Step 3 − Create two buttons, the first button will calculate the number of rows and the other button will calculate the numbers of columns with class names as “row” and “col” respectively
Step 4 − Create a click() event within the script tag, which will select “row” as a selector. Now use the length property and select the “tr” tag to count the number of rows.
Step 5 − Create a click() event for the column within the script tag, which will select “col” as a selector. Now use the length property and select the “th” tag to count the number of columns.
Step 6 − When any of the buttons is clicked it displays the number of rows and columns respectively on the particular button.
Example
In this example, we had created a table of an Employee Records with four columns as S No. , Name, Position, Salary. The data is inserted in it using the <td> tag which determines the table data.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Count number of Rows and Column in Table</title>
</head>
<body>
<h3>Check Numbers of Row and Column</h3>
<table class="table_id" border >
<thead>
<tr>
<th>S.no.</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Developer</td>
<td>₹0.00</td>
</tr>
<tr>
<td>2</td>
<td>Dev</td>
<td>Network Eng.</td>
<td>₹0.00</td>
</tr>
<tr>
<td>3</td>
<td>Jack</td>
<td>HR</td>
<td>₹0.00</td>
</tr>
<tr>
<td>4</td>
<td>William</td>
<td>Sales Exc.</td>
<td>₹0.00</td>
</tr>
</tbody>
</table>
<button class="row" style="padding: 0.4rem;margin-top: 1rem;">Check Row <span id="nr"></span></button>
<button class="col" style="padding: 0.4rem;">Check Column <span id="nc"></span></button>
<script>
$('.row').click(()=>{
$("#nr").css("background-color","red");
$("#nr").css("color","white");
$("#nr").css("padding","0.3rem 0.5rem");
$("#nr").css("margin-left","0.4rem");
$("#nr").css("border-radius","50%");
$('#nr').text($('tr').length);
})
$('.col').click(()=>{
$("#nc").css("background-color","red");
$("#nc").css("color","white");
$("#nc").css("padding","0.3rem 0.5rem");
$("#nc").css("margin-left","0.4rem");
$("#nc").css("border-radius","50%");
$('#nc').text($('th').length);
})
</script>
</body>
</html>
The below image shows the output of the above example. In the above example when the “Check Row” button is clicked the click() event with the “row” selector is triggered and it shows the output as the red pop number. When the “Check Column” button is clicked it invokes the click event which contains the column selector and displays the output in the button.
Conclusion
The text() method of jQuery is helpful to insert the value of the number of rows and columns in the button. The calculation of rows and columns is useful when we have to make a database which is easy to manipulate in it. The other application of this is, suppose we want to display the number of total entries in the table then in that case we can use this length property to display the result.
2K+ Views
To Continue Learning Please Login