FAQ：一覧画面で特定の列のみ背景色を変更したい
## 概要
一覧画面で特定の列の背景色を変更する際はスクリプトをご利用ください。手順は以下の通りです。
※今回は例として「[数値項目](/manual/table-management-num)」という名前の列の背景色を青色にします。
## 事前準備
1.対象のテーブルを開きます。
2.管理→テーブルの管理をクリックします。
3.スクリプトタブを開きます。
4.新規作成ボタンをクリックし、ダイアログを表示します。
5.タイトルに「一覧画面の数値項目の背景色を青色にする」等の任意のタイトルを入力します。
6.スクリプト欄に以下のスクリプトを入力します。
##### JavaScript
```
$p.events.after_set_GridRows =BackgroundRedToNumColumn;
$p.events.on_grid_load = BackgroundRedToNumColumn;
function BackgroundRedToNumColumn() {
//数値項目が一覧画面の何列目にあるか取得
var index = $p.getGridColumnIndex('数値項目');
var $row = $('.grid-row:not(.colorChanged)');
//表示された列のみ背景色を変更
$row.map(function(i,v){
$($(v)[0].children[index])
.css('background-color','blue')
.addClass('colorChanged');
});
}
```
7.出力先の「全て」のチェックを外し、「[一覧](/manual/table-management-grid)」にチェックします。
8.ダイアログの変更ボタンをクリックします。
9.画面下部の更新ボタンをクリックします。
10.対象テーブルの一覧画面を開き、数値項目の背景色が青色になっていることを確認します。
※上記で使用しているスクリプトの説明は以下のマニュアルをご確認ください。
- [$p.events.on_grid_load](/manual/script-events-on-grid-load)
- [$p.getGridColumnIndex](/manual/script-get-column-index)
-[$p.events.after_set_GridRows](/manual/script-events-after-set)
