有没有办法确定或计算HTML表如何以及如何使用rowspans进行规范化?或者如果有一个JavaScript库可以做到这一点.
例如:
+-----------+---------+ | Apple | Red | | Apple | Green | | Apple | Yellow | | Sun | Yellow | | Sun | Hot | | Charizard | Hot | | Charizard | Pokémon | +-----------+---------+
会变成这样:
+-----------+---------+ | Apple | Red | | | Green | | |---------| |-----------| Yellow | | Sun |-------- | |-----------| Hot | | |---------| | Charizard | Pokémon | +-----------+---------+
看看这个小提琴,看看我的意思:http://jsfiddle.net/scorch/LZKkQ/
这些组合中的一些可以手动找出来,但有些可能相当复杂.我想尽可能地减少表,并确保没有其他组合可以进一步减少它.即,表中最好只有唯一的值.
编辑:没关系小提琴的额外栏.似乎firefox在最右列的rowspan有一些问题,所以我不得不添加另一个,以获得所需的效果.
编辑2:
下面提到的DataTables插件fnMultiRowspan和fnFakeRowspan没有真正获得所需的结果.这两个插件需要预先以正确的方式排列表来工作; fnFakeRowspan仅适用于一列,fnMultiRowspan给出以下结果(第二列中热和黄色重复):
+-----------+---------+ | | Red | | Apple | Green | | | Yellow | |-----------+---------| | Charizard | Hot | | | Pokémon | |-----------+---------| | Sun | Yellow | | | Hot | +-----------+---------+
解决方法
正如@MahmoudGamal在上面提到的注释中,有一个jQuery调用的插件可能是非常有用的.查看
fnFakeRowspan功能:
Creates rowspan cells in a column when there are two or more cells in a row with the same content,effectively grouping them together visually. Note – this plug-in currently only operates correctly with server-side processing.