16

有没有办法确定或计算 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     |
+-----------+---------+
4

2 回答 2

2

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

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

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

于 2012-06-21T23:52:01.827 回答
0

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

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

+-----------+---------+
| Apple     | Red     |
| Pokémon   | Green   |
| Sun       | Yellow  |
| Charizard | Hot     |
+-----------+---------+
于 2012-06-26T04:01:32.420 回答