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

时间:2012-07-05 15:32:47

标签: php javascript jquery html

我有一个包含可变数量单元格的html表。 为了这个例子,我会说20x20(尽管它更大)。

这是通过php生成的,填充表的数据集已从mysql中提取。 这些单元格中的每一个都具有数值,并且需要特别放置在原样位置。因此,如果单元格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 个答案:

答案 0 :(得分:1)

在两次通过(O(n2))中进行,首先在宽度中遍历数组并检测相邻单元格的数量(并在相同单元格后设置为0):

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 |