背景・実現したいこと
上記テーブルを詳細画面で確認時に契約金額が0円の場合、
0円の行全てを削除、または非表示したいです。
現在下記コードで詳細画面を表示時サブテーブルに値が入るようにしております。
至急どなたかご回答いただけますと幸いです。
宜しくお願い致します。
利用したソースコード
var body = {
‘app’: kintone.app.getId(),
‘records’: [
{
‘id’: record[‘$id’][‘value’],
‘record’: {
“テーブル”: {
“value”: [
{
“id”: 1,
“value”: {
“契約_テーブル”: {
“value”: ‘契約1’//keiyakunum[n]
},
“契約金額_テーブル”: {
“value”: keiyakukingaku1
},
“予算金額_テーブル”: {
“value”: yosankingaku1
}
}
},
{
“id”: 2,
“value”: {
“契約_テーブル”: {
“value”: ‘契約2’//keiyakunum[n]
},
“契約金額_テーブル”: {
“value”: keiyakukingaku2
},
“予算金額_テーブル”: {
“value”: yosankingaku2
}
}
},
{
“id”: 3,
“value”: {
“契約_テーブル”: {
“value”: ‘契約3’//keiyakunum[n]
},
“契約金額_テーブル”: {
“value”: keiyakukingaku3
},
“予算金額_テーブル”: {
“value”: yosankingaku3
}
}
}
]
}
}
}
]
};
kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘PUT’, body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});
juridon様
ご返信いただきありがとうございます。
上記リンクも確認いたしましたが、
jsの
document.getElementById(‘record-gaia’).classList.add(‘xxx-show’);
と
cssの
.xxx-show .subtable-gaia tr:nth-child(3){
display: none;
}
を使うことで、3行目のテーブルの非表示に成功はしましたが、上記コードですと3行目しか非表示にできずおります
契約金額が0円の行はすべて非表示にするといったコードを書きたいです …
cssやjsまだまだ初心者なためご教示いただけますと幸いです。
何卒宜しくお願い致します。
CSSファイルの内容は動的には変更できないので、JavaScriptでDOM操作を行うことになります。
例えば
サブテーブルの行をforやforEachなどで繰り返して、ループの中で
if(サブテーブルのi行目の金額==0){
DOM操作で非表示にする
}
という処理をします。
ここで、
フィールド要素を取得する↓を使って、
https://developer.cybozu.io/hc/ja/articles/201942014#step3
これでテーブルのhtml要素を取得して、
テーブル要素→tbody→trと辿って、非表示にする行のtrの.style.display=“none”
とする感じです。
たとえば↓こんなかんじでテーブルの行のDOM操作できます。
//テーブルの要素を取得 const tableData = kintone.app.record.getFieldElement("テーブル"); //テーブルのtbody要素を取得
const tableBody = tableData.tBodies[0]; //テーブルのrows（行、tr）の要素を取得 const tableRows = tableBody.rows;
で、たとえば
tableRows[1].style.display = “none”
とすると2行目が非表示になります。
ヒントになれば幸いです
juridon様
さらにヒントをご教示いただき誠にありがとうございます。
ーーーーーーーーーーーーーーーーー
イベント：詳細画面
var tableRecords = event.record.テーブル.value;
for (var f = 0; f < tableRecords.length; f++){
if(tableRecords[f].value[‘契約金額_テーブル’].value === ‘0’){
var tableData = kintone.app.record.getFieldElement(“テーブル”);
var tableBody = tableData.tBodies[f];
var tableRows = tableBody.rows;
tableRows[f].style.display = “none”;
}
}
ーーーーーーーーーーーーーーーーー
いただきましたヒントをもとに上記コードを扱ってみましたが2点
さらなる疑問点が2点生じてしまいました
1、
var tableBody = tableData.tBodies[f]; の[]内を1や0からfにしたところ次行の
var tableRows = tableBody.rows;にて情報が読み取れませんでした…
2、
var tableBody = tableData.tBodies[f]; 及び
tableRows[f].style.display = “none” にて[]内を0や1などの数値にしたところ、
処理が上記display = "none"にてプログラムが止まってしまい
コンソールにて確認しましたところ
show.js:137 Uncaught TypeError: Cannot read property ‘rows’ of undefined
といったエラーがでてしまいました
以上2点さらにご教授いただけますと幸いです。
何卒宜しくお願い致します。
おはようございます！
サブテーブルの表示が完了するまでDOM操作を待つ必要があります。
最初のコメントで紹介したリンク先↓の、最初のコメントのサンプルコード内にある、
https://developer.cybozu.io/hc/ja/community/posts/207684803-DOM%E6%93%8D%E4%BD%9C%E3%81%A7%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E5%88%97%E3%82%92%E8%A4%87%E6%95%B0%E8%A1%8C%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84
setInterval(function () {～～},100)
※ざっくりいうと100ミリ秒後に～～を実行するの意味です。
の～～の中にDOM操作を書くと大丈夫ですm(. .)m
追記：setInterval(function () {～～},100)は↓のほうがいいかもしれません。何回も実行しちゃうので。
（setIntervalの使い方はググってみてくださいね）
const set_interval_id = setInterval(() => {
～～～～
clearInterval(set_interval_id);
},100);
juridon様
おはようございます！
あの後夜通し原因をさぐっておりました（笑）
setInterval(function () {～～},100) こちらを用いたところ
無事やりたいことができました
今回は大変勉強になりました！
誠にありがとうございます<(_ _)>
