詳細画面のサブテーブルの文字色を変更したい 其の２

kintone カスタマイズ
1

いつもお世話になっております。現在、詳細表示画面において、サブテーブルの奇数行に色を付けるCSSを使っております。見やすくなったので、この状態から更に当該明細の「種別」列のフィールド値が”看護”であったら、文字の色をピンクにしたいと考えております。そこで、mayuさんのかつての投稿「詳細画面のサブテーブルの文字色を変更したい」を参考にして、JSファイルを取り込んだのですが、、文字の色を変えることが出来ずにおります。。。どなたか同じ問題を既に解決なさっておりましたら、修正箇所をご教示いただけないでしょうか。。。

2

こんにちは。

日本語勉強中です。よろしくお願いいたします。

それぞれ、変数の中身を確認しても問題がなかったら、以下を試してみてください。

※文字色は赤を使います。

19行目ですが、以下のコードは

$(rows[index]).find('td:nth-child('+ COLOR_COLUMN_INDEX +')').css('color','pink');

こうなると思います。

スタイルは td に正しく反映されていますが、もっと中の.control-value-gaiaがあるので、色が変わらないかもしれません。

よって、以下のコードにすると

$(rows[index]).find('td:nth-child('+ COLOR_COLUMN_INDEX +') span').css('color','red');

 

もっと中のspanに適用するので、優先になり、色がちゃんと変わりました。

 

スタイルの優先順位について、

https://techacademy.jp/magazine/29326

 

「種別」列のフィールド値が”看護”であったら、文字の色をピンクにしたいと考えております。

当要件のみ実装するなら、以下がいかがですか。

 

kintone.events.on("app.record.detail.show",function(e) {  const TABLE_SELECTOR = '.subtable-6384242'; const COLOR_COLUMN_INDEX = 2;
$(`${TABLE_SELECTOR}td:nth-child(${COLOR_COLUMN_INDEX}) span:contains("看護")`).css('color','red');
});

 

 

3

Lorenz Ras様

早速のご教示誠にありがとうございます。しかも、初心者すぎる私の要件をご理解いただいて、新たなプログラムのご教示もありがとうございます。

教えて頂いたシンプルなプログラムで早速テストしようと思い、テスト用のアプリで試してみたのですが、何やら私の理解が足りないようで、「看護」の色が変わりませんでした、、、私の行ったことを添付致しますので、お忙しい中誠に恐縮ではございますが、一度見て頂けないでしょうか。。。

.jsファイルと同時に取り込んでいるライブラリファイルが間違えていたりするのでしょうか。。。。

 

4

豊和会 本部 様

バージョンを合わせました。

 

イベントが発火した際、当テーブルはDOMにまだ存在していないかもしれません。色々方法がありますが、豊和会 本部様のソースに合わせると、以下でいかがですか。※ 増殖など対応していません。

(() => {
  'use strict';
  
  kintone.events.on("app.record.detail.show", function(e) {
    
    const TABLE_SELECTOR = '.subtable-5535397';  
    const COLOR_COLUMN_INDEX = 2;
    
    // 毎３００ミリ秒、テーブルの存在をチェックします。
    const interval = setInterval(()=>{
      const els =  $(`${TABLE_SELECTOR} td:nth-child(${COLOR_COLUMN_INDEX }) span:contains("看護")`);

      if(els.length){ // 存在したら、
        clearInterval(interval); // 存在チェックをストップし、
        els.css('color','red'); // css を適用する。
      }
      
    }, 300) 
 
  return e;
    
  });
  
  
})();
5

Lorenz Rasさん！

お忙しい中、早速のご回答本当に本当にありがとうございます！画像の通り無事赤になりました！

頂いたプログラムをしっかり勉強致します。

6

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