在 javascript 中的表中计数特定值

Question

I'm newbie and having a trouble on how can I count the number of value 1 and value 2 under the header 2 based on the image I attached. So the result of value 1 should be 2 and the value 2 should also 2 Is there any trick how can I solve this, Im new with this,I hope anyone can help.

This is what I tried my html

 var tds = document.getElementById('table').getElementsByTagName('td'); var sum_paid= 0; var x = 0; for(var i = 0; i < tds.length; i ++) { if(tds[i].className == 'count_value"' && tds[i].innerHTML =="Value 2" ) { i++; } else if (tds[i].className == 'count_value"' && tds[i].innerHTML =="Value 1" ) { i++; } } console.log(x); console.log(i);

 <table id="table" name="table" id="table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td class="count_value">Value 1</td> <td>Value 1</td> </tr> <tr> <td>Value 1</td> <td class="count_value">Value 2</td> <td>Value 1</td> </tr> <tr> <td>Value 2</td> <td class="count_value">Value 1</td> <td>Value 1</td> </tr> <tr> <td>Value 2</td> <td class="count_value">Value 2</td> <td>Value 1</td> </tr> </tbody> </table>

Answer 1

Here's an option - just grab all elements with the class you have set on the second-column elements ( "count_value" ), and check if the text in those elements ( elem.innerText ) contains a "1" or "2" .

 let elementsToCount = document.querySelectorAll('.count_value'); let numOne = 0, numTwo = 0; elementsToCount.forEach((elem) => { if (elem.innerText.includes('1')) numOne++; if (elem.innerText.includes('2')) numTwo++; }) console.log("Number one:", numOne); console.log("Number two:", numTwo);

 <table id="table" name="table" id="table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td class="count_value">Value 1</td> <td>Value 1</td> </tr> <tr> <td>Value 1</td> <td class="count_value">Value 2</td> <td>Value 1</td> </tr> <tr> <td>Value 2</td> <td class="count_value">Value 1</td> <td>Value 1</td> </tr> <tr> <td>Value 2</td> <td class="count_value">Value 2</td> <td>Value 1</td> </tr> </tbody> </table>