Skip to content
Advertisement

Count specific value in table in javascript

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.

enter image description here

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>

Advertisement

Answer

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>
Advertisement