# 特定項目の選択で、対象レコードの背景色を変更

**URL:** <https://community.cybozu.dev/t/topic/4748>\
**Category:** kintone 開発相談\
**Created:** [2020 年 1 月 7 日午後 1:27 UTC](https://community.cybozu.dev/t/topic/4748 "2020-01-07T13:27:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1112](https://avatars.discourse-cdn.com/v4/letter/l/8c91f0/32.png) [@Legacy\_Account1112](https://community.cybozu.dev/u/Legacy_Account1112)\
**Post date:** [2020 年 1 月 7 日午後 1:27 UTC](https://community.cybozu.dev/t/topic/4748/1 "2020-01-07T13:27:25Z")

</div>

お世話になります。

ラジオボタンで「キャンセル」を選択した場合、対象の１レコードの背景色を「グレー」に変更したいと考えております。

フィール名：フィールドコード  
返信：henshin

JavaScript初心者です。対処法を教えてください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1188](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1188](https://community.cybozu.dev/u/Legacy_Account1188)\
**Post date:** [2020 年 1 月 8 日午前 4:51 UTC](https://community.cybozu.dev/t/topic/4748/2 "2020-01-08T04:51:33Z")

</div>

こんにちは！  
[この記事](https://community.cybozu.dev/hc/ja/articles/360016096972)を参考に少し書いてみました。

**・完成イメージ**

**・コード**

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

function bgcolorChange(event) {
var bgcolor = '#a9a9a9';
var reply = kintone.app.getFieldElements('hensin');

for (var i = 0; i < reply.length; i++) {
var records = event.records[i];
if (records.hensin.value === 'キャンセル') {
reply[i].style.backgroundColor = bgcolor;
}
}
}
kintone.events.on('app.record.index.show', bgcolorChange);

})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1112](https://avatars.discourse-cdn.com/v4/letter/l/8c91f0/32.png) [@Legacy\_Account1112](https://community.cybozu.dev/u/Legacy_Account1112)\
**Post date:** [2020 年 1 月 8 日午前 5:00 UTC](https://community.cybozu.dev/t/topic/4748/3 "2020-01-08T05:00:19Z")

</div>

いちごじゃむ様

サンプルのご提供ありがとうございます。

この場合、返信でキャンセルとなった、

３レコード目の１行全てをグレーにしたいのですが可能でしょうか。

よろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2020 年 1 月 15 日午前 6:01 UTC](https://community.cybozu.dev/t/topic/4748/4 "2020-01-15T06:01:00Z")

</div>

takkoboy様

お世話になっております。  
トヨクモの江田と申します。

下記で実装できるかと思います．

```
(function() {
  "use strict";
  kintone.events.on([
    'app.record.index.show',
  ], function(event){
    var tableRows = document.getElementsByClassName('recordlist-gaia')[0].getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    event.records.forEach(function(record, index){
      if(record.henshin.value === 'キャンセル') tableRows[index].style.background = '#a9a9a9';
    });
  });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1112](https://avatars.discourse-cdn.com/v4/letter/l/8c91f0/32.png) [@Legacy\_Account1112](https://community.cybozu.dev/u/Legacy_Account1112)\
**Post date:** [2020 年 1 月 15 日午前 7:01 UTC](https://community.cybozu.dev/t/topic/4748/5 "2020-01-15T07:01:24Z")

</div>

トヨクモ 江田様

いつもお世話になっております。

問題なく実装できました。

ありがとうございました。