🍔

【kintone】詳細画面のサブテーブルのDOM操作

1 min read

詳細画面のサブテーブルって、カスタマイズするのが難しいパーツの一つですよね。

  • 条件によってセルの色を変えたい
  • 表示のタイミングで値を表示したい
  • 行ごと非表示にしたい

などなど、色々とやりたいのですがDOM操作しなくちゃいけなくて、思うように行かないことも多いようです。

そこで、この記事では詳細画面でのサブテーブルの要素の取得方法から、DOM操作をするポイントを紹介したいと思います👀!

サブテーブルのhtml要素

サブテーブルの要素はcybozu developer networkのこちらのページに取得方法が書かれています。
フィールド要素を取得する

サブテーブルのフィールドコードを「テーブル」とした場合、

//テーブルの要素を取得
const el_Table = kintone.app.record.getFieldElement("テーブル");

とするとテーブル要素が取得できます。

行のhtml要素

テーブル要素のtBodyプロパティ、さらにrowsプロパティを指定すると、サブテーブルの行のhtml要素が取得できます。

//テーブルのtbody要素を取得
const el_tBody = el_Table.tBodies[0];

//テーブルのrows(行、tr)の要素を取得
const el_tRows = el_tBody.rows;

行やセルの指定方法

テーブルの行要素は、要素番号が0から始まる配列のように扱う事ができます。
行要素が取得できたら、cellsプロパティで更に列要素(セル)を指定することができます。

//n行目
el_tRows[n-1]

//n行目のm列目
el_tRows[n-1].cells[m-1]

//例:3行目の2列目
el_tRows[2].cells[1]

DOM操作例

styleプロパティを操作できます。
※設定できるCSSプロパティはこちらhttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Properties_Reference

//n行目を非表示にする
el_tRows[n-1].style.display = "none";

//n行目、m列目の背景を赤くする
el_tRows[n-1].cells[m-1].style.backgroundColor = "red";

注意事項

サブテーブルが完全に表示されるのを待ってからDOM操作をしないと、「そんな要素無いよ!」というエラーが表示されます。

対策

setInterval & clearIntervalを使うと良さそうです。

const set_interval_id = setInterval(() => {
  // DOM操作
  ・・・・・
  clearInterval(set_interval_id);
}, 100);

Discussion

ログインするとコメントできます