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;
}
※固定値(ueda)を指定することで、行を指定しています。指定する行を動的に変更することはできません。

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

  • プレビュー画面を開いてください。
  • リッチテーブルの、「UserCode」列:「ueda」の行の背景色が変わっています。
  • 次に、リッチテーブルの、「UserCode」列:「ueda」の行にカーソルを移動させてください。
  • カーソルを「UserCode」列:「ueda」の行に移動させると、行の背景色が赤色に変わります。