テーブルの複数行の下の枠線を太くしたい。

kintone カスタマイズ
1

何を実現したいのかを書きましょう

MutationObserverを使って偶数行に該当するセルの下の枠線を太くしたいです。

発生した問題やエラーメッセージを具体的に書きましょう

エラーは出ておりませんが添付ファイルのようにすべての行の枠線が太くなってしまいます。
※Boost! Attachmentというプラグインを使って行の途中から改行して１行のテーブルを２行に表示しております。

行装飾に関して
行装飾に関して2064×864 6.11 KB

実行したコードをコピー＆ペーストしましょう

コードは以下の通りです。

(() => {
  // レコードの詳細画面が表示されたときのイベント
  kintone.events.on("app.record.detail.show", (event) => {
    const table = document.querySelector('.subtable-11132553');
    if (!table) {
      console.log("Table not found");
      return;
    }

    const observer = new MutationObserver((mutationList) => {
      mutationList.forEach((mutation) => {
          if (mutation.type === "childList") {
              const trs = Array.from(mutation.addedNodes);
              trs.forEach((tr, index) => {
                if (index % 2 === 0) {
                    for (let i = 0; i < tr.cells.length; i++) {
                        tr.cells[i].style.borderBottom = '4px solid black';
                    }
                }
            });
          }
      });
  });

    // table要素内のtbody要素の子要素を監視
    observer.observe(table.tBodies[0], {
      childList: true,
      subtree: true // サブツリー全体を監視
    });
  });
})();```
2

ご質問の解決につながるかわかりませんが、いくつか気になる点がございます。

  1. テーブルのDOM要素を取得するには、クラスではなく、フィールド要素を取得するAPIを使います。
    理由：各要素に付与されているidやclass属性の値は、予告なく変更されます。
    詳細は、 kintoneコーディングガイドラインをご参考ください
  2. ご提示のコードのindex % 2 === 0は、trsに対するインデックスであり、テーブルの行全体のインデックスではない気がします。
  3. テーブルの行のインデックスは、フィールド要素取得APIで取得した要素から取得できます。
  4. （ChatGPT先生のアドバイス） observer.observe の設定: subtree: true を指定すると、監視範囲が tbody 内のすべての子孫に及びますが、テーブルの直下の tr だけに適用する場合は subtree: false でも問題ありません。コードの意図次第ですが、subtree: true だと無駄に多くのノード変更を検知する可能性があるため、適切な設定を選ぶ必要があります。