html - "Normalize"具有行跨度的 HTML 表格

Question

有没有一种方法可以确定或计算是否以及如何使用行跨度规范化 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 |
+-----------+---------+

看看这个 fiddle ，明白我的意思:http://jsfiddle.net/scorch/LZKkQ/

其中一些组合很容易手动计算出来，但有些组合可能非常复杂。我想尽可能地最小化表格，并确保没有其他组合可以进一步最小化它。即，最好只有表中的唯一值。

编辑:不要介意 fiddle 中的额外列。似乎 Firefox 在最右边的列上有一些 rowspan 问题，所以我不得不添加另一个以达到预期的效果。

编辑 2:

下面提到的 DataTables 插件 fnMultiRowspan 和 fnFakeRowspan 并没有真正得到想要的结果。这两个插件都需要事先以正确的方式对表格进行排序才能工作； fnFakeRowspan 仅适用于一列，fnMultiRowspan 给出以下结果(热和黄色在第二列中重复):

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

Answer 1

正如@MahmoudGamal 在上面的评论中提到的，有一个名为 DataTables 的 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.

根据快速阅读的代码，您似乎指定了一列，然后查找重复项，并根据需要合并单元格。 (注意:我自己没有尝试过这段代码。)