javascript - 在javascript中计算表中的特定值

Question

我是新手，我不知道如何根据我附加的图像计算标题 2的数量value 1和下面的数量。value 2所以value 1应该2和value 2应该的结果2有什么技巧我该如何解决这个问题，我是新手，我希望任何人都可以提供帮助。

这就是我尝试过的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>

标签： javascripthtml

Answer 1

这是一个选项 - 只需获取您在第二列元素 ( "count_value") 上设置的类的所有元素，然后检查这些元素 ( elem.innerText) 中的文本是否包含 a"1"或"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>