使用行跨度“规范化”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 |
+-----------+---------+

看看这个小提琴，看看我的意思：http://jsfiddle.net/scorch/LZKkQ/

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

编辑：不要介意小提琴中的额外列。似乎 Firefox 在最右边一列的行跨度方面存在一些问题，所以我不得不添加另一个以达到预期的效果。

编辑 2：

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

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

Answer 1

正如上面在 cmets 中提到的@MahmoudGamal，有一个名为DataTables 的jQuery 插件可能有用。查看fnFakeRowspan 函数：

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

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

Answer 2

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

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

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