サブテーブルのヘッダーの色変更

kintone カスタマイズ
1

はじめまして。

今、javascriptで入力画面のカスタマイズをしていますが、
サブテーブルのヘッダー（フィールド名）の色を列ごとに変更する方法はありますでしょうか？

ご存知の方がいらっしゃいましたらご教示ください。
よろしくお願いいたします。

2

山口昭雄さん、こんにちは

ヘッダーの色を列ごとに変更というのはこの認識で大丈夫でしょうか。

3

yogiさん、早速のレスポンスありがとうございます。

この認識です。

4

山口昭雄さん

色を変えるとなると DOM をいじらないといけなくなりますね。

ヘッダーのクラスを フィールド名を javascript で取得

この時 ヘッダーは thead タグのクラスではなく、th タグのクラスをとってください。

 例

//テーブルヘッダー取得
var table_hedder = document.getElementsByClassName("subtable-label-gaia subtable-label-single_line_text-gaia");

//フィールド名
var field_name = document.getElementsByClassName("subtable-label-inner-gaia");

th の個数分、ループさせ

条件分岐でフィールド名によって色を変えることができます。

例

for(var i = 0; i < table_hedder.length; i++) {
if(field_name[i].innerHTML === "文字列_1"){
table_hedder[i].style.backgroundColor = "red";
}else if(field_name[i].innerHTML === "文字列_2") {
table_hedder[i].style.backgroundColor = "blue";
}else if(...) {
....
}
}

例のコードは私のサンプルアプリの環境に合わせたコードになってますので

適宜山口昭雄さんのアプリに合わせてくださいね。

注意として、DOM をかなりいじることになるので

アップデートで動作しなくなる可能性があります。

5

yogiさんありがとうございました！

早速試してみます。