IM-BloomMaker リッチテーブルの特定の行の背景色を変更する方法

このCookBookでは、リッチテーブルの特定の行の背景色を変更する方法について紹介しています。

※固定値を指定することで行を指定しています。指定する行を動的に変更することはできません。

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

このサンプルは、2023 Autumn版以降でインポートできます。

レシピ

1. コンテナページに、リッチテーブルエレメントを配置する

2. CSSエディタを編集する

3. プレビューで確認する

1. コンテナページに、リッチテーブルエレメントを配置する

• 上記の「完成サンプル」のインポートファイルをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
• IM-BloomMaker のコンテンツ一覧画面を表示してください。
• 「intra-mart CookBook」>「im_cookbook_226946」のコンテンツを選択し、デザイナ画面を開いてください。

2. CSSエディタを編集する

• CSSエディタをひらいてください。

• CSSエディタに以下のように記述してください。

tr:has(td[title="ueda"]) {
  background-color: palegreen;
}
tr:hover:has(td[title="ueda"]) {
  background-color: red !important;
}

3. プレビューで確認する

• プレビュー画面を開いてください。

• リッチテーブルの、「UserCode」列：「ueda」の行の背景色が変わっています。

• 次に、リッチテーブルの、「UserCode」列：「ueda」の行にカーソルを移動させてください。

• カーソルを「UserCode」列：「ueda」の行に移動させると、行の背景色が赤色に変わります。