如何合并HTML表格中同ID<tr>元素的列内容？

当然可以实现这个需求！不过先提个重要的小提醒：HTML规范明确要求同一个文档中元素的ID必须唯一，你当前代码里存在两个<tr id="74">其实是不符合标准的，虽然浏览器通常不会因此直接报错，但这种写法可能引发后续的DOM操作问题，建议后续尽量避免（比如改用class来标识同组行）。不过针对你现在的场景，我们依然可以通过JavaScript来完成内容合并。

具体实现步骤 #

我们可以通过DOM操作，把相同ID行的Interfaces和Subnet列内容合并到同一行，并用<br>分隔：

// 获取所有id为"74"的表格行
const duplicateRows = document.querySelectorAll('#74');

// 当存在重复行时执行合并逻辑
if (duplicateRows.length > 1) {
  // 以第一行作为最终保留的目标行
  const targetRow = duplicateRows[0];
  // 获取目标行中需要合并的两个单元格
  const interfaceCell = targetRow.querySelector('td:nth-child(2)');
  const subnetCell = targetRow.querySelector('td:nth-child(3)');

  // 遍历剩余的重复行，合并内容并移除多余行
  for (let i = 1; i < duplicateRows.length; i++) {
    const currentRow = duplicateRows[i];
    // 追加Interfaces列的内容（用<br>换行分隔）
    interfaceCell.innerHTML += `<br>${currentRow.querySelector('td:nth-child(2)').textContent}`;
    // 追加Subnet列的内容
    subnetCell.innerHTML += `<br>${currentRow.querySelector('td:nth-child(3)').textContent}`;
    // 移除当前重复行
    currentRow.remove();
  }
}

更规范的优化建议 #

如果后续需要处理更多类似的分组行，建议把重复的ID改成class，比如：

<tr class="group-74">...</tr>
<tr class="group-74">...</tr>

然后把JS中的querySelectorAll('#74')改成querySelectorAll('.group-74')，这样既符合HTML规范，也能更灵活地处理多组数据。

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