如何按指定<th>列匹配HTML表格<td>内容并为重复单元格着色

以下是针对指定列（示例中为TYPE列）标记重复数据单元格的实现方案，仅处理目标列，不影响表格其他部分：

完整代码示例 #

HTML结构 #

<table id="data-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>TYPE</th>
      <th>MODEL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Fiesta</td>
      <td>ST</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Fiesta</td>
      <td>Titanium</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Focus</td>
      <td>RS</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Fiesta</td>
      <td>Zetec</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Kuga</td>
      <td>Vignale</td>
    </tr>
  </tbody>
</table>

CSS样式 #

.duplicate-cell {
  background-color: #b7f0b7; /* 浅绿色背景 */
}

JavaScript逻辑 #

document.addEventListener('DOMContentLoaded', function() {
  // 指定目标列的表头文本
  const targetColumnHeader = 'TYPE';
  const table = document.getElementById('data-table');
  const headerRow = table.querySelector('thead tr');
  const headers = Array.from(headerRow.querySelectorAll('th'));
  
  // 找到目标列的索引
  const targetColumnIndex = headers.findIndex(header => header.textContent.trim() === targetColumnHeader);
  if (targetColumnIndex === -1) {
    console.error(`未找到表头为${targetColumnHeader}的列`);
    return;
  }

  // 收集目标列所有单元格的内容
  const tbody = table.querySelector('tbody');
  const cells = Array.from(tbody.querySelectorAll(`tr td:nth-child(${targetColumnIndex + 1})`));
  const contentCounts = {};

  // 统计每个内容的出现次数
  cells.forEach(cell => {
    const content = cell.textContent.trim();
    contentCounts[content] = (contentCounts[content] || 0) + 1;
  });

  // 给重复内容的单元格添加样式类
  cells.forEach(cell => {
    const content = cell.textContent.trim();
    if (contentCounts[content] > 1) {
      cell.classList.add('duplicate-cell');
    }
  });
});

代码说明 #

1. 定位目标列：通过表头文本找到指定列的索引，确保只处理目标列（比如示例中的TYPE列）
2. 统计内容出现次数：遍历目标列的所有单元格，用对象记录每个内容的出现次数
3. 标记重复单元格：再次遍历目标列单元格，给出现次数大于1的单元格添加预定义的CSS类，实现绿色背景效果

只需修改targetColumnHeader的值，就能切换到其他列进行处理，不会影响表格的其他部分。

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