如何为 HTML 表格中指定列（如 TYPE）内重复值的单元格统一着色

本文介绍如何精准定位 html 表格中某一特定列（例如 `

type` 对应的所有 ``），提取其文本内容，识别重复值，并仅为这些重复值所在的单元格添加高亮样式（如绿色背景），避免影响其他列。

在实际前端开发中，常需对表格中某列的重复数据进行可视化标记（如标出所有重复的车型 Fiesta），但不能简单遍历全部 —— 否则会导致跨列误匹配（例如把 BRAND 列的 "Ford" 和 TYPE 列的 "Fiesta" 混淆）。关键在于：按列定位 + 值频次统计 + 精准着色。

✅ 正确做法：用 CSS 选择器精确定位目标列

假设目标列为

TYPE，观察表头结构：

indNUMNAMETYPENUMNAMETYPENUMNAMETYPE

可见 TYPE 列出现在第 4、7、10 列（即 :nth-child(4n+4)，从 1 开始计数）。因此，应使用：

const typeCells = document.querySelectorAll('td.data:nth-child(4n+4)');

而非 getElementsByClassName("data")（它会抓取全部 10 列，导致逻辑错乱）。

✅ 完整实现逻辑（含重复值检测）

以下代码不仅定位 TYPE 列，还准确统计各值出现次数，仅对出现 ≥2 次的值着色（更符合“重复即高亮”的业务含义）：

⚠️ 注意事项

• 不要硬编码 nth-child(4n+4)：若表格结构变化（如新增列），该选择器将失效。推荐使用动态表头匹配（如上例），鲁棒性更强。
• 空格与大小写敏感：.textContent.trim() 可规避前后空格干扰；如需忽略大小写，可统一转为 .toLowerCase()。
• 性能考虑：对于超大表格（>1000 行），建议使用 Map 替代 Array.includes()，时间复杂度从 O(n²) 降至 O(n)。
• CSS 优先级：确保 .highlight-duplicate 样式不被其他规则覆盖（必要时加 !important 或提高选择器权重）。

通过以上方法，你即可安全、精准地为任意指定列中的重复数据添加视觉标识，真正实现“按需着色”，兼顾可维护性与扩展性。