如何基于指定表头列（如 TYPE）高亮重复值单元格

✅ 正确做法：按 文本动态定位目标列

function highlightDuplicateCells(headerText = "TYPE") {
  const table = document.querySelector('table'); // 可限定范围，如 .s-table
  const headers = table.querySelectorAll('thead th');

  // 步骤1：查找目标列索引（从1开始计数，用于 :nth-child()）
  let targetIndex = -1;
  for (let i = 0; i < headers.length; i++) {
    if (headers[i].textContent.trim() === headerText) {
      targetIndex = i + 1; // :nth-child 使用 1-based 索引
      break;
    }
  }

  if (targetIndex === -1) {
    console.warn(`未找到表头为 "${headerText}" 的列`);
    return;
  }

  // 步骤2：获取该列所有  元素（仅 tbody 内，排除 thead/th）
  const targetCells = table.querySelectorAll(`tbody td:nth-child(${targetIndex})`);

  // 步骤3：统计频次（使用 Map 更精准，支持空值/空白处理）
  const valueCount = new Map();
  targetCells.forEach(cell => {
    const text = cell.textContent.trim();
    valueCount.set(text, (valueCount.get(text) || 0) + 1);
  });

  // 步骤4：为出现次数 ≥2 的值对应的所有单元格添加样式类
  targetCells.forEach(cell => {
    const text = cell.textContent.trim();
    if (valueCount.get(text) > 1) {
      cell.classList.add('duplicate-cell');
    }
  });
}

// 调用示例：高亮所有重复的 TYPE 值
window.addEventListener('DOMContentLoaded', () => {
  highlightDuplicateCells("TYPE");
});

配套 CSS（支持语义化命名与可访问性）：

有道翻译AI助手

有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻

下载

.duplicate-cell {
  background-color: #4CAF50; /* 绿色 */
  color: white;
  font-weight: 600;
}
/* 可选：悬停增强可读性 */
.duplicate-cell:hover {
  background-color: #388E3C;
  transition: background-color 0.2s;
}

⚠️ 注意事项与最佳实践

• 避免 getElementsByClassName + 固定步长逻辑：原示例中 i += 10 和 i += 10 的硬编码严重依赖表格结构（10列），一旦列数变化即失效；且无法适配 顺序变动。
• 优先使用 :nth-child(N) 而非 :nth-of-type：因 和 同属 col 类型，:nth-of-type 在混合结构中不可靠；:nth-child 结合动态计算的列索引更准确。
• 区分大小写与空白符：.trim() 和严格相等（===）确保 "Fiesta " 与 "Fiesta" 视为同一值。
• 性能友好：仅遍历一次目标列单元格，时间复杂度 O(n)，适用于千行级表格。
• 扩展性强：只需修改 highlightDuplicateCells("NAME") 即可切换目标列，无需改 HTML 或 JS 逻辑。

✅ 实际效果：在您提供的示例中，TYPE 是第 4 列（索引 4），脚本将自动捕获所有 tbody td:nth-child(4)，发现 MSOME 出现 3 次 → 所有对应 均被标记为 .duplicate-cell，视觉上清晰突出数据重复模式。

此方案兼顾准确性、可维护性与工程实践，是处理“按标题列高亮重复值”场景的推荐实现。