Web开发新手求助：统计HTML表格第3、4列中值为1的数量

示例HTML结构 #

假设你的表格结构类似这样（目标列已添加checkOne类）：

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
    <td class="checkOne">1</td>
    <td class="checkOne">0</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
    <td class="checkOne">1</td>
    <td class="checkOne">1</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
    <td class="checkOne">0</td>
    <td class="checkOne">1</td>
  </tr>
  <tr>
    <td>行4列1</td>
    <td>行4列2</td>
    <td class="checkOne">0</td>
    <td class="checkOne">0</td>
  </tr>
</table>

补充统计逻辑的JavaScript代码 #

在你已有的统计行数代码基础上，添加以下逻辑即可实现统计：

// 已有统计行数的代码
const rowCount = document.querySelectorAll('table tr').length;
console.log(`表格行数：${rowCount}`);

// 新增：统计值为1的数量
// 方式1：forEach遍历计数
let countOne = 0;
const targetCells = document.querySelectorAll('.checkOne');
targetCells.forEach(cell => {
  // 用trim()避免文本空格干扰判断
  if (cell.textContent.trim() === '1') {
    countOne++;
  }
});

// 方式2：用reduce简化写法（二选一即可）
// const countOne = [...document.querySelectorAll('.checkOne')].reduce((total, cell) => {
//   return cell.textContent.trim() === '1' ? total + 1 : total;
// }, 0);

console.log(`第3、4列中值为1的数量：${countOne}`);

说明 #

• document.querySelectorAll('.checkOne')会选中所有标记了checkOne类的单元格，正好对应你需要统计的第3、4列。
• 用trim()处理单元格文本是为了避免空格、换行符等无关字符影响判断结果。
• 两种统计方式任选其一，forEach更直观易懂，reduce写法更简洁。

内容的提问来源于stack exchange，提问作者Kaan Vardar