🍔

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

2021/02/11に公開

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

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

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

テーブルのhtml要素

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

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

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

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

テーブル要素の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]

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);