如何在 HTML 表格中统计唯一值（基于指定列）-html教程-PHP中文网

如何在 HTML 表格中统计唯一值（基于指定列）

本文介绍如何使用 javascript 高效统计 html 表格中某列（如“nombre”）的唯一值数量，替代原始的总行数计数，避免重复项干扰统计结果。

本文介绍如何使用 javascript 高效统计 html 表格中某列（如“nombre”）的唯一值数量，替代原始的总行数计数，避免重复项干扰统计结果。

在实际 Web 开发中，常需对表格数据进行去重统计（例如统计不重复的姓名、类别或用户 ID）。原代码 document.getElementById("table").rows.length 仅返回所有

行数（含表头），无法识别语义重复——这正是问题核心：需按内容去重，而非按行计数。

✅ 正确实现方式：利用 Set 去重

JavaScript 的 Set 对象天然支持唯一值存储，结合 querySelectorAll 和 Array.from() 可简洁提取并去重目标列内容。以下是优化后的完整函数：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

function totalregistros() {
  // 仅选取 tbody 中的行（排除 thead）
  const rows = document.querySelectorAll('#table > tbody > tr');

  // 提取每行第 2 列（索引为 1，对应 "NOMBRE"）的文本内容
  const nombres = Array.from(rows, row => row.cells[1].textContent.trim());

  // 使用 Set 自动去重
  const uniqueNombres = new Set(nombres);

  // 更新显示：注意减 1 是因原逻辑排除表头，但此处 rows 已过滤 tbody，无需再减
  document.getElementById("total__registros").value = "Registros: " + uniqueNombres.size;
}

// 注意：window.onload 接收函数引用，不要加括号调用
window.onload = totalregistros;

? 关键说明与注意事项

列索引准确性：row.cells[1] 假设“NOMBRE”位于每行的第二个（索引从 0 开始）。若列序变动，请同步调整索引。
空格与空白处理：.trim() 可防止因前后空格导致的误判（如 "Alba " 和 "Alba" 被视为不同值）。
健壮性增强建议：生产环境可添加容错逻辑，例如检查 row.cells[1] 是否存在，避免 undefined 导致错误：
```
row.cells[1]?.textContent?.trim() || ''
```
性能优势：Set 时间复杂度为 O(n)，远优于嵌套循环去重，适用于数百行以内的常规表格。