“规范化”HTML表与rowspan

前端之家收集整理的这篇文章主要介绍了“规范化”HTML表与rowspan前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法确定或计算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.

基于快速代码读取,它看起来像您指定一个列,然后查找重复,并根据需要组合单元格. (注意:我还没有尝试过这个代码.)

猜你在找的HTML相关文章