複数ある関連レコードの1行目のみ背景色を付けたいのですが・・・

初心者で、見よう見まねで弄っていたのですが、

アプリの中の関連レコード一覧(合計で25個程度の関連レコード)の全てを一行目だけ色を付けて見やすくしたいと思い、

javascriptを入れてみました。

一応動くのですが、明らかに遅く色が変わりきらない時があるため、

どなたか具体的な修正などお力をお貸し頂けないでしょうか・・・

(eq()につきましては、列が複数ある項目は省略しております)

function changeColor(arg) {
var tr = $(kintone.app.record.getFieldElement(‘契名’)).find(‘tr’);
var tr2 = $(kintone.app.record.getFieldElement(‘生年契’)).find(‘tr’);
var tr3 = $(kintone.app.record.getFieldElement(‘所属’)).find(‘tr’);
var tr4 = $(kintone.app.record.getFieldElement(‘職番’)).find(‘tr’);
var tr5 = $(kintone.app.record.getFieldElement(‘住所’)).find(‘tr’);
var tr6 = $(kintone.app.record.getFieldElement(‘電話’)).find(‘tr’);
var tr7 = $(kintone.app.record.getFieldElement(‘等級’)).find(‘tr’);
var tr8 = $(kintone.app.record.getFieldElement(‘自動車’)).find(‘tr’);
var tr9 = $(kintone.app.record.getFieldElement(‘登録番号’)).find(‘tr’);

           $(tr[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           $(tr2[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           $(tr3[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           $(tr4[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           $(tr5[1]).children().css(‘background-color’, ‘#ffffa9’);
           $(tr6[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
         $(tr7[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           $(tr8[1]).children().css(‘background-color’, ‘#ffffa9’);
           $(tr9[1]).children().eq(1).css(‘background-color’, ‘#ffffa9’);
           
}
kintone.events.on([‘app.record.detail.show’], function(event) {
var targetRow = [1]; // 色変え対象の行番号

// サブテーブルのhtmlが表示されるまで待つ  
setTimeout(changeColor, 3200, [targetRow]);  
return event;  

});

 

以上、宜しくお願い申し上げます

25個程度の関連レコード!! は、すごいですね。

関連レコードが、表示するまで待つ時間が固定値なので、間に合ったり間に合わなかったりと動作が安定しません。

関連レコードの動作については、kintone 関連レコード詳細画面で遅延表示の動作検証 が参考になると思います。

対応方法としては、下記が考えられます。

・関連レコードが表示するまで、setTimeout で繰り返す。
25個あると結構大変

・MutationObserverで、関連レコードのDOM要素の変化を監視

・CSS で、一行目だけ色を付ける

CSS だと、関連レコードが表示するまで待つ必要が無いので、簡単だと思います。

例:

.subtable-gaia.reference-subtable-gaia tbody>tr:first-child {
  background-color: #ffffa9;
}

コメント頂きまして感謝いたします。

CSSで一行目だけ色を付けるに挑戦してみます