Question

有没有办法确定或计算是否以及如何使用rowspans对HTML表进行规范化？或者，如果有一个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在最右边的列上有一些rowpan的问题，所以我不得不为它添加另一个以获得所需的效果。

编辑2 ：

下面提到的DataTables插件fnMultiRowspan和fnFakeRowspan并没有真正得到理想的结果。两个插件都需要事先以正确的方式对表进行排序才能工作; fnFakeRowspan仅适用于一列，fnMultiRowspan会在下面显示结果（热门和黄色在第二列中重复）：

+-----------+---------+
|           | Red     |
| Apple     | Green   |
|           | Yellow  |
|-----------+---------|
| Charizard | Hot     |
|           | Pokémon |
|-----------+---------|
| Sun       | Yellow  |
|           | Hot     |
+-----------+---------+

Answer 1

正如上面评论中提到的@MahmoudGamal，有一个名为DataTables的jQuery插件可能很有用。查看fnFakeRowspan功能：

当一行中有两个或多个具有相同内容的单元格时，在列中创建rowspan单元格，从而有效地将它们组合在一起。注意 - 此插件目前仅在服务器端处理时正常运行。

基于快速代码读取，看起来您指定了一个列，然后它会查找重复项，并根据需要组合单元格。（注意：我自己没有尝试过这段代码。）

Answer 2

如果你足够了解JavaScript，那么自己编写它会很简单。您需要做的就是检查下一个字符串是否与当前字符串相同，然后只增加一个字符串的高度而不是打印两次。

编辑：所以你希望它最终像

+-----------+---------+
| Apple     | Red     |
| Pokémon   | Green   |
| Sun       | Yellow  |
| Charizard | Hot     |
+-----------+---------+

使用rowspan“规范化”HTML表格

2 个答案: