首先来说你遇到的表格显示异常的核心原因：当你给第一个data-id="12"的单元格设置colspan后，其他同属该行的data-id="12"单元格还留在表格里，这会导致表格的列数计算混乱——第一个单元格已经占了length列，后面的单元格又额外占用列数，自然会打破表格的布局结构。

修正后的解决方案 #

我们需要在设置第一个单元格的跨列属性后，移除或隐藏其他多余的目标单元格，让表格结构恢复正常。这里是调整后的代码：

// 先获取所有目标单元格的集合
const $targetCells = $('[data-id="12"]');
// 避免没有找到目标单元格时出错
if ($targetCells.length === 0) return;

const name = $targetCells.attr("data-name");
const cellCount = $targetCells.length;

// 处理第一个单元格：追加文本 + 设置跨列数
$targetCells.first()
  .append(name)
  .attr('colspan', cellCount);

// 移除剩下的目标单元格，消除布局冲突
$targetCells.slice(1).remove();

关键细节说明 #

• 为什么要移除其他单元格？：表格的每行列数是通过单元格的数量+colspan/rowspan的数值来计算的，同一行里如果既有跨列的单元格，又保留原有的其他单元格，会让总行数超出预期，导致表格边框、列宽等显示错乱。
• 可选：隐藏而非移除：如果你不想彻底删除这些单元格（比如后续还要用到），可以用.hide()代替.remove()，.hide()会设置display:none，不会影响布局，同样能解决问题：

  $targetCells.slice(1).hide();
  

• 容错处理：开头的if ($targetCells.length === 0) return可以避免当没有找到对应data-id的单元格时，后续代码执行报错。

补充：关于跨多行的情况 #

如果你的目标单元格是分布在不同行的，那需要用rowspan而不是colspan，同时也要处理其他行的对应单元格——设置第一个单元格的rowspan为行数，然后移除其他行的目标单元格，原理和跨列的处理逻辑一致。

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