COUNT ELEMENTS BY TagName() IN JAVADCRIPT
In this article, we have tried to show you how we can count elements using javascript. To count any html element we need to specify TagName or attributes.
'<a href="" id="" class="">article</a>'
In this element '<a> is TagName. href="", id="", class="", etc are attributes.
If you want to know how many <a> tag is used in a page, we use this javascript code.
var ct = document.getElementsByTagName('a').length;
Full Code is here:
<!DOCTYPE html>
<html>
<title>Count Elements by TagName()</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<a href="" id="" class="">Item1</a>
<a href="" id="" class="">Item2</a>
<a href="" id="" class="">Item3</a>
<br>
<button onclick="myFunction()">Count</button>
<div id="cv">Value </div>
<script>
function myFunction(){
var count = document.getElementsByTagName('a').length;
document.getElementById("cv").innerHTML = "Total <a> Tag used: "+count;
}
</script>
</body>
</html>
To count total table used in a page use this javascript code :
<script>
function myFunction(){
var count = document.getElementsByTagName('table').length;
document.getElementById("cv").innerHTML = count;
}
</script>
To count rows of a table you can use this javascript code :
<script>
function myFunction(){
var count = document.getElementById('mytable').rows.length;
document.getElementById("cv").innerHTML = count;
}
</script>
Note: Please notice that I have used table id to count the rows.
To count column of a table row you can use this javascript code :
<script>
function myFunction(){
var col = document.getElementById('mytable').rows[0].cells.length;
document.getElementById("cv").innerHTML = col;
}
</script>
Note: Please notice that I have used rows[0].cells.length; to count the column of the first row of
the table. To count second row replace 0 by 1.
To get cell value of a cell or row you can use this code :
<!DOCTYPE html>
<html>
<title>Get the value of a cell</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<table id="mytable"border="1" width="400px">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Count</button>
<div id="cv"></div>
<script>
function myFunction(){
var cell = document.getElementById('mytable').rows[0].cells[0];
document.getElementById("cv").innerHTML = cell.innerText;
}
</script>
</body>
</html>
Note: Please notice that I have used rows[0].cells[0]; It means I have requested to get value of the
first row and first column of the table.
I hope this example is useful, and helped you a bit.
How to get table cell value in <select> element. click here
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------