本文介绍如何使用 javascript 的 set 对象高效统计 html 表格中指定列（如“nombre”）的唯一文本值数量，替代原始的行数计数逻辑，精准返回去重后的记录数。
本文介绍如何使用 javascript 的 set 对象高效统计 html 表格中指定列（如“nombre”）的唯一文本值数量，替代原始的行数计数逻辑，精准返回去重后的记录数。
在实际前端开发中，仅统计表格总行数（如 rows.length）往往无法满足业务需求——例如需统计“姓名不重复的用户数”。针对您提供的 HTML 表格，目标是基于 <td> 中的“NOMBRE”字段（即每行第二列，索引为 1）统计唯一值个数，从原始 7 行得出正确结果：5 个唯一姓名（Andrea、Gabriela、Alba、Jose、Luis）。
实现的核心思路是：提取所有姓名 → 去重 → 计数。JavaScript 的 Set 对象天然支持自动去重，配合 Array.from() 与 querySelectorAll() 可简洁高效完成该任务。
以下是优化后的完整函数：
function totalregistros() {
// 选取 tbody 中所有 tr 元素，并提取每行第2列（NOMBRE）的文本内容
const nameCells = document.querySelectorAll('#table > tbody > tr');
const names = Array.from(nameCells, tr => tr.cells[1].textContent.trim());
// 使用 Set 自动去重
const uniqueNames = new Set(names);
// 更新显示：注意原逻辑减1是为排除表头，此处同样需排除（因 querySelectorAll 未包含 thead）
document.getElementById("total__registros").value = "Registros: " + uniqueNames.size;
}
// 修正 window.onload 调用方式：传入函数引用，而非立即执行
window.onload = totalregistros;✅ 关键说明：
立即学习“前端免费学习笔记（深入）”；
- #table > tbody > tr 精准定位数据行（跳过 <thead>），避免手动 rows.length - 1 的易错逻辑；
- .cells[1] 对应“NOMBRE”列（索引从 0 开始），.textContent.trim() 清除潜在空白符，提升健壮性；
- Set 构造时自动过滤重复字符串，size 属性直接返回唯一项数量；
- window.onload = totalregistros（无括号）确保函数在页面加载完成后执行，而非立即调用返回 undefined。
⚠️ 注意事项：
- 若表格结构动态变化（如列顺序调整），请同步更新 cells[index] 的索引；
- 如需兼容老旧浏览器（如 IE），可改用 Array.prototype.reduce() + indexOf() 模拟 Set 行为，但现代项目推荐使用原生 Set（支持所有主流浏览器）；
- 若“NOMBRE”列可能为空或含空格，建议在 trim() 后增加空值过滤：tr.cells[1]?.textContent?.trim()。
通过此方案，您不仅能准确获得“Registros: 5”，更掌握了一种通用、可复用的 DOM 表格去重统计模式。
