如何通过JavaScript统计HTML表格中NOMBRE字段的唯一值数量

直接替换你的JavaScript代码为以下版本，即可实现统计NOMBRE列唯一值数量的需求：

function totalregistros() {
  // 获取表格tbody中的所有数据行
  const dataRows = document.querySelectorAll("#table tbody tr");
  // 创建Set存储唯一的NOMBRE值
  const uniqueNames = new Set();

  // 遍历每行提取NOMBRE字段
  dataRows.forEach(row => {
    // 第二列（索引1）是NOMBRE，去除首尾空格避免误判
    const nombre = row.cells[1].textContent.trim();
    uniqueNames.add(nombre);
  });

  // 更新结果到目标元素
  document.getElementById("total__registros").value = `Registros: ${uniqueNames.size}`;
}

// 注意：这里不要加括号，否则会立即执行而不是绑定事件
window.onload = totalregistros;

关键改动说明： #

• 放弃统计总行数的逻辑，改为提取每行的NOMBRE字段值
• 使用Set对象自动去重，这是前端实现COUNT(DISTINCT)效果最简洁的方式
• 精准获取tbody内的数据行，避免包含表头行导致错误
• 调用trim()处理文本，防止空格导致的“假重复”（比如"Alba "和"Alba"被误判为不同值）
• 修正了window.onload的写法：原代码加了括号totalregistros()会立即执行，改为绑定函数引用即可在页面加载完成后执行

为什么SQL语句在JS里没用？ #

你写的SELECT COUNT(DISTINCT NOMBRE) FROM usuarios是后端数据库的查询语法，前端JS无法直接执行数据库语句，必须通过DOM操作读取页面上已渲染的表格数据，再用前端逻辑处理去重和统计。

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