本文介绍如何使用 javascript 高效统计 html 表格中某列（如“nombre”）的唯一值数量，替代原始的总行数计数，避免重复项干扰统计结果。
本文介绍如何使用 javascript 高效统计 html 表格中某列（如“nombre”）的唯一值数量，替代原始的总行数计数，避免重复项干扰统计结果。
在实际 Web 开发中，常需对表格数据进行去重统计（例如统计不重复的姓名、类别或用户 ID）。原代码 document.getElementById("table").rows.length 仅返回所有 <tr> 行数（含表头），无法识别语义重复——这正是问题核心：需按内容去重，而非按行计数。
✅ 正确实现方式：利用 Set 去重
JavaScript 的 Set 对象天然支持唯一值存储，结合 querySelectorAll 和 Array.from() 可简洁提取并去重目标列内容。以下是优化后的完整函数：
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”位于每行的第二个 <td>（索引从 0 开始）。若列序变动，请同步调整索引。
- 空格与空白处理：.trim() 可防止因前后空格导致的误判（如 "Alba " 和 "Alba" 被视为不同值）。
-
健壮性增强建议：生产环境可添加容错逻辑，例如检查 row.cells[1] 是否存在，避免 undefined 导致错误：
row.cells[1]?.textContent?.trim() || ''
- 性能优势：Set 时间复杂度为 O(n)，远优于嵌套循环去重，适用于数百行以内的常规表格。
? 运行效果验证
对示例表格执行后，uniqueNombres 将包含 {"Andrea", "Gabriela", "Alba", "Jose", "Luis"}，共 5 个唯一值，最终显示 "Registros: 5"，完全符合预期。
通过此方法，你不仅能精准统计唯一值，还掌握了现代 JavaScript 中 Set 与 DOM 查询的典型协同模式——简洁、高效且易于维护。
立即学习“前端免费学习笔记（深入）”；
