テーブルセルの結合イメージ

本サンプルは、明細ブロックにおいて、同じ値を持つ列のセルを結合したように見せるイメージで出力を行うものです。

下記の画像は、 Client-side JavaScript で同じ値を持つセルを結合する処理を反映させたもの（画面１）と、TALON のデフォルト表示（画面２）を比較した例です。

セルの結合処理は Client-side JavaScript にて実装しており、各項目の値を取得し、前後のセルの値が同一であれば、対象要素に特定のクラスを付与することで表現しています。クラスの定義も、同様に Client-side JavaScript 内に記載されています。

なお、項目の値の取得などは、要素の ID を直接指定することで実現しています。
各要素に付与されている ID は、ブラウザの開発者ツールを使用することで確認可能です。
ただし、ID の仕様や DOM 構造は非公開であり、TALON のバージョンに依存しています。
そのため、バージョンアップ時にはコードの修正が必要となる可能性がある点にご注意ください。

画面１： Client-side JavaScriptでセル結合実施


画面２：TALON のデフォルト表示