サブテーブルの項目名の色を変更したい

kintone カスタマイズ
1

お世話になっております。
現在、サブテーブルの項目名の背景色を変えたいと試しております。

  1. フィールドコード1
  2. フィールドコード2

上記2箇所のみ変更したいです。

 

1)  JSで試みた方法

https://developer.cybozu.io/hc/ja/community/posts/360010731243-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%81%AE%E8%89%B2%E5%A4%89%E6%9B%B4 

https://developer.cybozu.io/hc/ja/community/posts/360028883792-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E8%89%B2%E5%A4%89%E6%9B%B4 

上記を参考に記述しましたが動作せず、デベロッパーツールでもエラーがでません。

(function() {
    "use strict";
   
    kintone.events.on(["app.record.detail.show",
                       "app.record.create.show"],function(event){


var table_hedder = document.getElementsByClassName("subtable-label-gaia");
var field_name = document.getElementsByClassName("subtable-label-inner-gaia");

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";
   }
    }
   })
   })();

 

2) CSSで試みた方法

デベロッパーツールではうまく動作していますが、本番に反映させるとうまくいきません…

th.subtable-label-gaia.subtable-label-single_select-gaia.label-5536266 {
    background-color: red; 
}

th.subtable-label-gaia.subtable-label-single_select-gaia.label-5534461 {
  background-color: red;
}

何卒アドバイスいただけると幸いです。

2

 

https://zenn.dev/pirosikick/articles/5158c8ce1d3f33

こちらのようにサブテーブルを監視して、出現したら書き換えるという方法はどうでしょうか。
パット見むずかしいかもしれませんが記事後半にコードをすべてつなげたものがのってますので、それを流用はできるかと思います。

3

迷子様

①のJavaScriptについては、

field_name[i].innerHTML === “フィールドコード1”

の部分で、フィールドコードを指定されていますが、こちらはフィールドコードではなく、フィールド名を指定すれば、動作するかと思います。

②に関しては、single_select-gaiaが、ドロップダウンフィールドなので、文字列フィールドやその他の違うフィールドを指定されている場合は、反映しません。

4

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