# レコード一覧画面の数字を条件により文字色を変えたい

**URL:** <https://community.cybozu.dev/t/topic/8252>\
**Category:** kintone 開発相談\
**Created:** [2023 年 10 月 26 日午前 2:03 UTC](https://community.cybozu.dev/t/topic/8252 "2023-10-26T02:03:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![k0810](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@k0810](https://community.cybozu.dev/u/k0810)\
**Post date:** [2023 年 10 月 26 日午前 2:03 UTC](https://community.cybozu.dev/t/topic/8252/1 "2023-10-26T02:03:37Z")

</div>

入力した数字を一覧画面で◯以上は赤、◯以下は黒と条件ごとに色を付けたいのですが、  
javascriptでできますでしょうか？  
始めたばかりでよくわからず､､､､よろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![pomo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/pomo/32/465_2.png) [@pomo](https://community.cybozu.dev/u/pomo)\
**Post date:** [2023 年 10 月 26 日午前 2:19 UTC](https://community.cybozu.dev/t/topic/8252/2 "2023-10-26T02:19:26Z")

</div>

できます。  
開発tipsのこちらあたりが参考になるかと思います。

[ログインユーザーが担当しているレコードに背景色をつける](https://cybozudev.zendesk.com/hc/ja/articles/202640970-%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8C%E6%8B%85%E5%BD%93%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B)

---

<div class="post-metadata">

**Author:** ![k0810](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@k0810](https://community.cybozu.dev/u/k0810)\
**Post date:** [2023 年 10 月 26 日午前 6:45 UTC](https://community.cybozu.dev/t/topic/8252/3 "2023-10-26T06:45:24Z")

</div>

ありがとうございます。

質問ですが、一覧画面の文字列一行のフィールドに対しては下記のjavascriptでできたのですが、こちらを数値では使用できないでしょうか？

(function() {  
‘use strict’;

```
kintone.events.on('app.record.index.show',function(event){

  let records = event.records;
  let elems = kintone.app.getFieldElements('フィールド名');

  console.log(records);
  
  for(let i = 0; i<records.length; i++){
    
    let reco = records[i];
    let letter = reco.フィールド名.value; //１つのレコードのステータスの中身
    
    let elem = elems[i];
    
    if(letter === '赤にしたい文字'){
        elem.style.fontWeight = 'bold';
        elem.style.color = 'red';
    }else if(letter === '黒にしたい文字'){
        elem.style.fontWeight = 'bold';
        elem.style.color = 'black';
        }
  }
  return event;
  
});

```

})();

---

<div class="post-metadata">

**Author:** ![pomo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/pomo/32/465_2.png) [@pomo](https://community.cybozu.dev/u/pomo)\
**Post date:** [2023 年 10 月 26 日午前 7:24 UTC](https://community.cybozu.dev/t/topic/8252/4 "2023-10-26T07:24:30Z")

</div>

レコードから取り出したときに数値として取り出して、if文の何個以上、以下を判定でいいのかなと思います。

```javascript
(function() {
‘use strict’;

kintone.events.on('app.record.index.show',function(event){
  let records = event.records;
  let elems = kintone.app.getFieldElements('フィールド名');
  console.log(records);
  for(let i = 0; i<records.length; i++){
    let reco = records[i];
//数値として
    let letter = Number(reco.フィールド名.value); //１つのレコードのステータスの中身
    let elem = elems[i];

//数値で判定    
    if(letter >= 5){
        elem.style.fontWeight = 'bold';
        elem.style.color = 'red';
    }else if(letter < 2){
        elem.style.fontWeight = 'bold';
        elem.style.color = 'black';
        }
  }
  return event;
  
});
})();

```

---

<div class="post-metadata">

**Author:** ![k0810](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@k0810](https://community.cybozu.dev/u/k0810)\
**Post date:** [2023 年 10 月 26 日午前 7:49 UTC](https://community.cybozu.dev/t/topic/8252/5 "2023-10-26T07:49:37Z")

</div>

ありがとうございます。  
温度の数値フィールドで25.1℃以上は赤文字、25.0℃以下は黒文字にしたく、  
下記のようにしたのですができませんでした。数値フィールドの単位は℃をつけています。  
どこか違いますでしょうか？

(function() {  
‘use strict’;

kintone.events.on(‘app.record.index.show’,function(event){  
let records = event.records;  
let elems = kintone.app.getFieldElements(‘温度’);  
console.log(records);  
for(let i = 0; i\<records.length; i++){  
let reco = records[i];  
//数値として  
let letter = Number(reco.温度.value); //１つのレコードのステータスの中身  
let elem = elems[i];

//数値で判定  
if(letter \>= 25.1){  
elem.style.fontWeight = ‘bold’;  
elem.style.color = ‘red’;  
}else if(letter \<＝ 25.0){  
elem.style.fontWeight = ‘bold’;  
elem.style.color = ‘black’;  
}  
}  
return event;

});  
})();

---

<div class="post-metadata">

**Author:** ![pomo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/pomo/32/465_2.png) [@pomo](https://community.cybozu.dev/u/pomo)\
**Post date:** [2023 年 10 月 27 日午前 3:32 UTC](https://community.cybozu.dev/t/topic/8252/6 "2023-10-27T03:32:29Z")

</div>

> [@k0810](#):
>
> }else if(letter \<＝ 25.0){

のイコールが環境文字？になってるからだと思われます（25.1の方は大丈夫みたいです）

```javascript
(function () {
	"use strict";
	const fieldName = "温度"
	kintone.events.on("app.record.index.show", function (event) {
		let records = event.records;
		let elems = kintone.app.getFieldElements(fieldName);
		if (!elems) return event
		console.log(records);
		for (let i = 0; i < records.length; i++) {
			let reco = records[i];
			//数値として
			let letter = Number(reco[fieldName].value); //１つのレコードのステータスの中身
			let elem = elems[i];

			//数値で判定
			if (letter >= 25.1) {
				elem.style.fontWeight = "bold";
				elem.style.color = "red";
			} else if (letter <= 25.0) {
				elem.style.fontWeight = "bold";
				elem.style.color = "black";
			}
		}
		return event;
	});
})();

```

---

<div class="post-metadata">

**Author:** ![k0810](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@k0810](https://community.cybozu.dev/u/k0810)\
**Post date:** [2023 年 10 月 27 日午前 6:17 UTC](https://community.cybozu.dev/t/topic/8252/7 "2023-10-27T06:17:12Z")

</div>

pomo様ありがとうございました。  
反映することができました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 10 月 30 日午前 6:17 UTC](https://community.cybozu.dev/t/topic/8252/8 "2023-10-30T06:17:21Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。