こんにちは。
サブテーブル6列目にあるフィールドの文字列の色を変更したいのですが、下記のコードでは文字色を変えることができません。
プログラミング初心者で、どこが間違っているのか見当がつかず困っています。
どなたか、お力貸していただけませんでしょうか。よろしくお願いします。
jQuery.noConflict();
(function($){
‘use strict’;
function changeColor(arg) {
var tr = $(kintone.app.record.getFieldElement(‘Table’)).find(‘tr’);
var target = arg[0];
for (var i = 0; target.length > i; i++) {
var row = target[i];
$(tr[row]).children().eq(5).css(‘color’, ‘red’);
}
}
}) (jQuery);
RioNさん
こんにちは。ひよこです。
みたところ、いくつか問題がありそうです。
changeColor() を関数を定義しているだけで、changeColor() を実行してない
まず、changeColor() を関数を定義しているだけで、changeColor() を実行してないので動きません。
おそらく、この投稿を参考にされたかと思うのですが、
この投稿に書いてあるコードの場合、レコード詳細画面を開いたときに実行しています。
setTimeout の中に書いてあるのは、kレコード詳細画面を開いたときのタイミングではテーブルが描画されていないことがあるので、開いてから 0.5秒後に changeColor を実行する、としています。
kintone.events.on(['app.record.detail.show'], function(event) {
... 略...
// サブテーブルのhtmlが表示されるまで0.5秒待つ
setTimeout(changeColor, 500, [targetRow]); // ここで changeColor() を実行している
return event;
});
関数の実行などは、kintone カスタマイズのチュートリアルでひととおり勉強してみるのをオススメします！
特に関係しそうなのはこのあたりでしょうか。
Table の tr 要素 は行を示す要素なのでサブテーブル6列目にあるフィールド（＝つまりセル）の要素ではない
ちなみに、テーブルのフィールドの要素を取得できるAPIはありません。
kintone の HTML を直接弄ることになるので、kintone の今後のアップデートで動かなくなる可能性があります。
var tr = $(kintone.app.record.getFieldElement('Table')).find('tr');
で、取得しているのは行の要素なので、セルの要素じゃないです。あと見出し行も含んでいます。
なので、テーブルの内容（tbody）だけ、かつセルの要素を取得しないといけないです。
あと、文字色を変えたい場合、フィールドの文字は span 要素にあるので、深堀りして span タグにスタイルを当てる必要があります。
var rowNum = 5; // 何列目か(０からスタートなので、6列目の場合は5です）
// テーブルの内容の行を取得（配列）
var $trs = $(kintone.app.record.getFieldElement("Table")).find("tbody > tr");
$trs.each(function(index, tr) {
$(tr).children().eq(rowNum).find('span').css('color', 'red');
});
ひよこ様
迅速なご回答ありがとうございます。おかげさまで期待通りのプログラム実装が叶いました！
おそらくｔｒ要素が違うであろうと察しはついていたのですが、いまひとつテーブル構造の理解が追い付かず、苦戦しておりました。
とてもわかりやすく丁寧に解説してくださったおかげで、よく理解することができました。本当に感謝しております。
初歩的なミスもあり、失礼いたしました。サンプルコードを動かしながらkintoneカスタマイズに挑戦していますが、アドバイスいただいたとおり、
改めてチュートリアルをさらってみようと思います。
親切にご対応していただき、どうもありがとうございました。