如何使用JavaScript统计表格td中status列的字符串数量

原生JavaScript实现（操作DOM） #

如果表格是直接渲染在页面上的DOM元素，可通过遍历表格行统计：

// 获取目标表格（替换成你实际的表格ID）
const table = document.getElementById('your-table-id');
// 提取所有数据行（跳过表头，从第2行开始）
const dataRows = Array.from(table.querySelectorAll('tr')).slice(1);
// 初始化统计容器
const statusStats = {};

// 遍历每行统计status
dataRows.forEach(row => {
  // 替换成status所在列的索引（从0开始，比如第3列就写2）
  const statusCell = row.cells[2];
  if (statusCell) {
    const statusText = statusCell.textContent.trim();
    // 更新统计数
    statusStats[statusText] = (statusStats[statusText] || 0) + 1;
  }
});

// 查看结果
console.log(statusStats);

基于数据数组的实现（框架场景） #

如果表格是通过Vue/React等框架渲染的，直接操作数据源数组更高效：

// 假设你的表格数据源是tableData数组，每个元素包含status字段
const tableData = [
  { id: 1, status: '已完成' },
  { id: 2, status: '待处理' },
  // 更多数据...
];

const statusStats = {};
tableData.forEach(item => {
  const status = item.status?.trim() || '未知状态';
  statusStats[status] = (statusStats[status] || 0) + 1;
});

console.log(statusStats);

注意事项 #

• 调整row.cells[2]中的索引值，对应实际status列在表格中的位置（从0开始计数）
• 用trim()去除字符串前后空格，避免因空格导致的统计误差
• 若存在空值，可添加默认处理（比如归为“未知状态”）

内容的提问来源于stack exchange，提问作者iso ayu