サブテーブル内フィールドの文字色を変更したい

こんにちは。

サブテーブル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() を実行してない
  • Table の tr 要素 は行を示す要素なのでセルの要素ではない

 

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; // 何列目か(0からスタートなので、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');
});

ひよこ様

迅速なご回答ありがとうございます。おかげさまで期待通りのプログラム実装が叶いました!

おそらくtr要素が違うであろうと察しはついていたのですが、いまひとつテーブル構造の理解が追い付かず、苦戦しておりました。
とてもわかりやすく丁寧に解説してくださったおかげで、よく理解することができました。本当に感謝しております。

初歩的なミスもあり、失礼いたしました。サンプルコードを動かしながらkintoneカスタマイズに挑戦していますが、アドバイスいただいたとおり、
改めてチュートリアルをさらってみようと思います。

親切にご対応していただき、どうもありがとうございました。