如何基于指定表头列高亮匹配内容的HTML表格单元格

统计频次并批量着色
利用 Map 或对象统计各值出现次数，仅对出现 ≥2 次的值，将其所在

以下是完整、健壮、可复用的实现代码：

AskAI

无代码AI模型构建器，可以快速微调GPT-3模型，创建聊天机器人

下载

<style>
  .highlighted {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
  }
</style>

<table class="s-table">
  <thead>
    <tr>
      <th>BRAND</th>
      <th>TYPE</th>
      <th>COLOR</th>
      <th>BRAND</th>
      <th>TYPE</th>
      <th>COLOR</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ford</td><td>Fiesta</td><td>white</td><td>Audi</td><td>A7</td><td>black</td></tr>
    <tr><td>Ferrari</td><td>F40</td><td>red</td><td>Honda</td><td>Accord</td><td>silver</td></tr>
    <tr><td>Ford</td><td>Fiesta</td><td>blue</td><td>Ford</td><td>Fiesta</td><td>yellow</td></tr>
  </tbody>
</table>

<script>
  function highlightDuplicateCells(targetHeader = "TYPE") {
    const table = document.querySelector('.s-table');
    const thead = table.querySelector('thead');
    const thList = thead.querySelectorAll('th');

    // Step 1: Find column index (1-based) by header text
    let columnIndex = -1;
    for (let i = 0; i < thList.length; i++) {
      if (thList[i].textContent.trim() === targetHeader) {
        columnIndex = i + 1; // convert to 1-based for :nth-child()
        break;
      }
    }
    if (columnIndex === -1) {
      console.warn(`Header "${targetHeader}" not found in table.`);
      return;
    }

    // Step 2: Select only <td> in that column
    const targetCells = table.querySelectorAll(`tbody td:nth-child(${columnIndex})`);

    // Step 3: Count occurrences
    const counts = new Map();
    targetCells.forEach(td => {
      const text = td.textContent.trim();
      counts.set(text, (counts.get(text) || 0) + 1);
    });

    // Step 4: Highlight all cells with count > 1
    targetCells.forEach(td => {
      const text = td.textContent.trim();
      if (counts.get(text) > 1) {
        td.classList.add('highlighted');
      }
    });
  }

  // Run after DOM loads
  document.addEventListener('DOMContentLoaded', () => {
    highlightDuplicateCells("TYPE"); // ✅ Only highlights "Fiesta" in TYPE columns
  });
</script>

⚠️ 注意事项

• 区分大小写与空白符：使用 .trim() 和严格相等（===）确保 "Fiesta " 不被误判为 "Fiesta"。
• 多表支持：函数接受 targetHeader 参数，可复用于不同表格和列名（如 "COLOR" 或 "BRAND"）。
• 性能友好：仅查询一次 DOM，使用 Map 实现 O(n) 时间复杂度，适合百行级表格。
• 避免硬编码索引：原始方案中 4n+4 依赖列数恒为 10 且 TYPE 固定在第 4 列，实际项目中极易断裂；本方案通过语义化匹配彻底解耦结构与逻辑。

通过此方法，你不仅能精准高亮 TYPE 列中重复的 Fiesta，还能轻松扩展至任意标题列，真正实现「按需着色、语义驱动、开箱即用」的表格数据可视化能力。