# レコード一覧の背景色の設定がうまくいかない

**URL:** <https://community.cybozu.dev/t/topic/5503>\
**Category:** kintone 開発相談\
**Created:** [2021 年 11 月 29 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/5503 "2021-11-29T07:15:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\
**Post date:** [2021 年 11 月 29 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/5503/1 "2021-11-29T07:15:16Z")

</div>

初心者です。「[レコード一覧とレコード詳細画面で条件書式を設定する](https://community.cybozu.dev/hc/ja/articles/202341944-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%A8%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%A7%E6%9D%A1%E4%BB%B6%E6%9B%B8%E5%BC%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)」のページを参考に、レコード一覧のみの背景色を変更できるようなコードに編集してみました。

初期設定がクリーム色（#fff8dc）と白色の縞々（伝わりますでしょうか？）で、「完了状況」という項目が「完了」になったときに黄色（#ffd900）、「失注」になったときにグレーに行全体の色を（#adadad）に変更したいです。

ただ、参考にしたものでは、「ステータス」の列だけ色変更されているので、私の設定したいものとは少し違うのかな？と思っておりますが、どのように表示されるか確認しようとCSSファイルを反映させてみました。→全く変更がされませんでした。エラーも出ていません。

何がおかしいのか全く検討もつかない状況です。

詳しい方、ご教授いただければ幸いです。

```
(function() {
 "use strict";

kintone.events.on('app.record.index.show', function(event) {
 var bgColor = '#fff8dc';
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];
  elStatus[i].style.backgroundColor = bgColor;

  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffd900';
    break;
   case "失注":
    bgColor = '#adadad';
    break;
   }
  }
 });
})();

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account404](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@Legacy\_Account404](https://community.cybozu.dev/u/Legacy_Account404)\
**Post date:** [2021 年 11 月 29 日午前 8:42 UTC](https://community.cybozu.dev/t/topic/5503/2 "2021-11-29T08:42:31Z")

</div>

kobaharuさん、はじめまして。

kobaharuさんのおっしゃる通り、プログラムが正常に動いたとしても、「完了状況」フィールドのみ背景色が変更されると思います。

現行のプログラムを正常に動作させるために、2点ご確認ください。

&nbsp;

1. アップロード先は、「PC用のJavaScriptファイル」になっていますでしょうか？

2. 

```
elStatus[i].style.backgroundColor = bgColor;

```

の部分を、forループが閉じる直前に持ってきた場合はどうでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\
**Post date:** [2021 年 11 月 30 日午前 4:01 UTC](https://community.cybozu.dev/t/topic/5503/3 "2021-11-30T04:01:02Z")

</div>

はじめまして。

1.ご指摘の通り、cssとして保存し、「PC用のCSSファイル」にアップロードしてしまっていました。初歩的すぎてお恥ずかしいです。

2 .コードを教えていただいた通りに直し、全体的にも見直して以下のコードに変更したところ、思っていたとおりの色変更が実現できました。クリーム色（#fff8dc）と白色の縞々にするのは無理でしたが、結局全部色が変わっていくので、そこは別に変更しなくて良いかな、と納得しております。

```
(function() {
 "use strict";

kintone.events.on('app.record.index.show', function(event) {
 var bgColor
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];

  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffd900';
    break;
   case "失注":
    bgColor = '#adadad';
    break;
default:
bgColor = '#fff8dc';
break;
   }
  elStatus[i].parentNode.style.backgroundColor = bgColor;
  }
 });
})();

```

本当に助かりました。ありがとうございました。