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 では、一番右の列の rowspan に問題があるようです。目的の効果を得るには、別の列を追加する必要がありました。

編集2：

以下で説明するDataTables プラグインfnMultiRowspanでfnFakeRowspanは、実際には望ましい結果が得られません。どちらのプラグインも、動作する前にテーブルを正しい方法でソートする必要があります。fnFakeRowspan1 つの列でのみ機能しfnMultiRowspan、以下の結果が得られます (ホットとイエローは 2 番目の列で複製されます)。

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

2 に答える 2

2

上記のコメントで @MahmoudGamal が述べたように、便利なDataTablesという jQuery 用のプラグインがあります。fnFakeRowspan関数を確認してください。

行に同じ内容のセルが 2 つ以上ある場合、列に行スパン セルを作成し、効果的にそれらを視覚的にグループ化します。注 - このプラグインは現在、サーバー側の処理でのみ正しく動作します。

簡単なコード読み取りに基づいて、列を指定したように見え、次に重複を探し、必要に応じてセルを結合します。(注: このコードを自分で試したことはありません。)

于 2012-06-21T23:52:01.827 に答える
0

JavaScript を十分に理解していれば、自分で簡単に作成できます。次の文字列が現在の文字列と同じかどうかを確認し、それを 2 回印刷する代わりに高さを増やすだけです。

編集：だから、あなたはそれを次のようにしたいでしょう

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