根据类或值合并相邻的html表格单元格答案

【问题标题】：merge adjacent html table cells based on class or value根据类或值合并相邻的html表格单元格
【发布时间】：2012-07-06 21:26:20
【问题描述】：

我有一个包含可变数量单元格的 html 表格。为了这个例子，我会说 20x20（虽然它相当大）。

这是通过 php 生成的，用于填充表的数据集已从 mysql 中提取。这些单元格中的每一个都有一个数值，并且需要专门将其放在 is 所在的位置。因此，如果单元格 A(10,15) 的值为 100，则该 100 需要专门位于 10,15- 在生成表格时，我无法分析定位。

现在，其中许多单元格具有相同值的其他相邻单元格。水平或垂直。

我需要做的是合并此表中具有相同值的相邻单元格。这可以是水平的、垂直的或两者兼而有之，但仍保持为矩形 - 没什么太时髦的。

例如，如果我有

0 1 1 1 0
2 2 5 0 4
5 5 5 1 4

我需要根据值修改 colspan 和/或 rowspan - 需要注意的是，在生成时，我实际上可以为每个定义类或 id 这些细胞。此外，在生成过程中，我可以确定一个系列中是否会连续出现多个，但我无法知道下一行是否会有一个。

ps：我确实做了一些研究，发现了这个线程。 Complex table merging javascript & jquery algorithm

修改了 jsfiddle 示例以同时影响单元格的 colspan 和 rowspan 但是当它需要合并两个以上的单元格时它似乎会翻转-

对这个问题有什么建议的方法？

提前谢谢你

【问题讨论】：

【解决方案1】：

分两次执行（O(n2)），首先在宽度上遍历您的数组并检测相邻单元格的数量（并将同一单元格之后的单元格设置为零）：

0(1) 1(3) 1(0) 1(0) 0(1)
2(2) 2(0) 5(1) 0(1) 4(1)
5(3) 5(0) 5(0) 1(1) 4(1)

然后，垂直遍历它，找到两个数字相同（并且计数> 0）的单元格，你会得到：

0(1,1) 1(3,1) 1(0,0) 1(0,0) 0(1,1)
2(2,1) 2(0,0) 5(1,0) 0(1,1) 4(1,2)
5(3,1) 5(0,0) 5(0,0) 1(1,1) 4(1,0)

现在，这对的第一个数字是 colspan，第二个是 rowspan。如果其中一个数为0，则不输出。

0 1---- 0
2-- 5 0 4
5---- 1 |

【讨论】：