In this article, you will learn how to count the number of columns in an HTML Table using JQuery or Javascript. In this article, we used the two ways to count the number of columns in a row of Table.
Here are the examples to count the number of columns in a row of Table.
How to Count the Number of Rows in an HTML Table Using JQuery or Javascript
In this example, we used the length property to calculate the number of columns in a row of a table.
Here is an example to count the number of columns in a row of an HTML table.
<!DOCTYPE html>
<html>
<head>
<title>
How to Count The Number of Columns in HTML Table Using Jquery
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count The Number of Columns in a HTML Table Using jQuery
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button">
Total Column Count
</button>
<!-- Script to Count The Number of Columns in a Table Row-->
<script>
$(document).ready(function () {
$("button").click(function () {
// To Count all the columns in the table
// and get the count of the selected elements
var colCount = $("#tableId tr th").length;
alert('Total Number of Columns in a Table: '+ colCount);
});
});
</script>
</center>
</body>
</html>In this example, we used the length property to calculate the number of columns in a row of an HTML table. The general format is like this:
var colCount = document.getElementById("tableId").rows[0].cells.length;
Here is an example to count the number of columns in a row of an HTML table.
<!DOCTYPE html>
<html>
<head>
<title>
How to Count Number of Columns in HTML Table Using Javascript
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<strong>
Count Number of Columns in an HTML Table Using Javascript
</strong>
<br />
<br />
<table id="tableId" border="1" width="140">
<thead>
<tr style="background: purple; color: white;">
<th>S.No</th>
<th>Course Name</th>
<th>Course Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C#</td>
<td>CS</td>
</tr>
<tr>
<td>2</td>
<td>Python</td>
<td>PY</td>
</tr>
<tr>
<td>3</td>
<td>Javascript</td>
<td>JS</td>
</tr>
<tr>
<td>4</td>
<td>Data Structure and Algorithm</td>
<td>DSA</td>
</tr>
</tbody>
</table>
<br />
<button type="button" onclick="columnsCount()">
Total Column Count
</button>
<!-- Script to Count Number of Columns in a Table Row-->
<script>
function columnsCount() {
// To Count all the columns in the table
// and get the count of the selected elements
var colCount = document.getElementById("tableId").rows[0].cells.length;
alert("Total Number of Columns in a Table: " + colCount);
}
</script>
</center>
</body>
</html>
I hope this article will help you to understand how to count the number of columns in a row of an HTML Table using JQuery or Javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments