Javascript 使用JS合并具有相同值的相邻HTML表格单元格

这件事我已经纠结了一段时间了。我有一个基于一些JSON数据自动生成的表，这些数据可能会有所不同。我想合并第一列中具有相同值的相邻单元格，例如本表中的“fish”和“bird”：

鱼
鲑鱼
鱼
鳕鱼
鱼
鲽
鸟
罗宾
鸟
乌鸦

我不想理想地使用任何库，只想使用纯JS

这就是我希望它看起来的样子：

表格，tr，td{
边框：实心1px黑色；
}

鱼
鲑鱼
鳕鱼
鲽
鸟
罗宾
乌鸦

你真的很接近

简化的一种方法是保留对当前“header”单元格的引用，即要增加的

行span

单元格。通过这种方式，您根本不必处理索引，产生了一个非常简单的算法：

• 每行
  • 将firstCell设置为行的第一个单元格
  • 如果这是第一行或第一个单元格的文本与headerCell的文本不同
    • 将headerCell设置为firstCell
  • 否则
    • 将headerCell的行间距增加1
    • 移除第一个单元格

在JavaScript中，它如下所示：

const table=document.querySelector（'table'）；
让headerCell=null；
for（让表中的行。行）{
const firstCell=行单元格[0]；
如果（headerCell==null | | firstCell.innerText！==headerCell.innerText）{
头细胞=第一细胞；
}否则{
headerCell.rowSpan++；
firstCell.remove（）；
}
}

表格，tr，td{
边框：实心1px黑色；
}

鱼
鲑鱼
鱼
鳕鱼
鱼
鲽
鸟
罗宾
鸟
乌鸦

请与预期表格共享示例场景rows@NagaSaiA谢谢-很好的观点，现在添加到问题（）可能的旁注：您可能希望在这一点上这些是

s（至少在简单示例中的上下文中-我可能是错的）。非常感谢，这是一个非常优雅的解决方案。我现在遇到了一个问题，将其应用于表的所有列。由于某种原因，我得到一个类型错误：“TypeError:firstCell未定义”。我所做的只是将firstCell=row.cells[0]更改为firstCell=row.cells[I]，并将代码包装到表中每个列的for循环中。你知道发生了什么吗？我还发现，简单地用行中的不同索引重复函数两次（作为测试）。cells[x]也不起作用。没有错误，但只有第一个函数似乎有任何效果。我真的很困惑！