本文介绍如何精准定位 html 表格中某一特定列（如 “type” 或 “name”），提取其所有单元格内容，识别重复值，并仅对该列中重复出现的单元格添加背景高亮样式。
在实际前端开发中，常需对表格中某列的重复数据进行可视化标记（例如标出所有重复的车型 TYPE），而非全表扫描——这既提升性能，也避免误染无关列。核心难点在于：如何可靠地定位目标列？ 仅靠 class="data" 这类通用类名无法区分列语义；而依赖固定索引（如 i += 10）极易因表格结构微调而失效。
✅ 推荐方案：使用 CSS 伪类 :nth-child() 精确选择目标列单元格
以问题中第二个示例表格为例，目标列为
- 第 1 行：
依次为 ind, NUM, NAME, TYPE, NUM, NAME, TYPE, ... → TYPE 单元格始终位于 :nth-child(4n+4)（即第 4、8、12... 个 ） - 因此，用 document.querySelectorAll('td.data:nth-child(4n+4)') 可稳定获取全部 TYPE 列单元格，完全规避硬编码索引的风险。
以下是完整、健壮的实现代码：
ind NUM NAME TYPE NUM NAME TYPE NUM NAME TYPE 0 FORD R39185 MSOME KIA K29481 MSOME TOYOTA C39259 MSOME 1 FORD R39186 MSOME KIA R39185 MSOME TOYOTA C39260 MSOME 2 FORD R39187 MSOME KIA K46981 MSOME TOYOTA R39185 MSOME ? 关键优化说明：
- ✅ 语义化定位：通过 th.textContent 动态查找列索引，彻底摆脱对 HTML 结构顺序的硬依赖；
- ✅ 精准去重逻辑：使用 Map/对象统计频次，仅当某值出现 ≥2 次时才高亮，避免单次出现也被误标；
- ✅ 作用域安全：限定 querySelectorAll('tbody td:nth-child(...)')，排除表头干扰；
- ⚠️ 注意事项：若表格存在 colspan/rowspan，:nth-child 可能失效，此时需改用 data-column 属性或遍历行内单元格索引匹配。
此方案兼顾可维护性、健壮性与可读性，适用于任何具有明确表头的 HTML 表格场景。
