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

1. はじめに

Client-side JavaScript および CSS を用いて、複数行で同一値を持つ列のセルを、結合して表示しているように見せるサンプルを紹介します。

2. サンプル機能の内容と確認ポイント

本サンプルでは、rowspan を使用せずに、Client-side JavaScript を用いて、複数行にわたって同一値を持つセルを縦方向に結合されたように表示する方法を紹介します。
通常、縦方向のセル結合には rowspan を用いますが、本手法では DOM を直接操作し、CSS と組み合わせることで、見た目上の結合を実現しています。

【クラス名の設定】
要素の取得に使用するクラス名は、以下のとおりクラス名を設定します。

設定場所：ブロック設定画面 >「項目情報」>「STYLE CLASS」

• 「品目コード」：hin-cd

• 「品目名」　　：hin-name

また、結合表示に必要なスタイルとして、あらかじめ以下のクラスを CSS に定義します。

【Client-side JavaScript による実装内容】

1. getElementById でテーブル要素を取得

2. querySelectorAll を用いてすべての tr 要素を取得

3. 各 tr に対して forEach でループ処理を実行

4. index 引数を用いて、前の tr 要素を取得

5. 前行と現行の td 要素の値を比較し、同一であれば以下を実行：

   • 前行の td に classList.add("upper_class") を適用

   • 現行の td に classList.add("lower_class") を適用

   • 現行の td の値を空にする

　この処理により、同一値のセルが視覚的に1つに結合されたように表示されます。

🔍 確認いただけるポイント

• 2行分のセルが、1つのセルとして表示されていること 

3. 画面イメージ

以下は、「品目コード」と「品目名」が1つのセルとして表示されている状態を示しています。

!++++

使用したコード一覧

!----