表の追加をループにしたい

いつも大変お世話になっております。

下記をループで回せるようにしたいのですが、
全然わからず、アドバイスを頂けた助かります。
どうぞよろしくお願いします。

row = tabletd.insertRow(tabletd.rows.length);
cell◯◯ = row.insertCell(◯◯);
cell△△ = row.insertCell(△△);
cell□□ = row.insertCell(□□);
cell◯◯.innerHTML = record.日付.value;
cell△△.innerHTML = record.りんご.value;
cell□□.innerHTML = record.みかん.value;

row = tabletd.insertRow(tabletd.rows.length);
data =[日付,りんご,みかん];
for( i = 0; i< data.length; i++ ) {
  (cell+i) = row.insertCell(i);
  cell+i.innerHTML = record.data[i].value;
}

kajitaさん

日付・りんご・みかんフィールドの値を各レコードのテーブル行に追加されたいということでしょうか?

これらの記事が参考になるかと思いますので、見てみて下さい。

▼レコード更新におけるテーブル操作のテクニック
https://developer.cybozu.io/hc/ja/articles/200752984

▼第6回 テーブルの値を利用する
https://developer.cybozu.io/hc/ja/articles/202422244

Tomosukeさん
コメントありがとうございます。
言葉足らずでした。

日付|りんご|みかん
A店| 10個 | 30個
A店| 20個 | 40個

で、入力できるものを作ってまして、
商品が頻繁に増えるので、
data =[日付,りんご,みかん,ばなな,めろん];
と追加したらいいだけのものにしたく、投稿しました。

リンク先の記事も拝見させて頂いてます。
ありがとうございます。

kajitaさん

すみません、テーブルの列の追加をされたいということで合っていますか?
(今回でいうと、初期ではりんごとみかんしかないので、そこにばななとめろんも追加)

もう少し詳細をいただけますでしょうか?
差し支えなければアプリの詳細画面等も添付いただけると嬉しいです。

Tomosukeさん
コメントありがとうございます。

テーブルの列を追加したいで合ってます。
ちょっとデータもダミーなんですが、ここの食材の追加が多いので、
宣言だけ追加で、あとはループでまわしたく試行錯誤している状態です。

kajitaさん

詳細をありがとうございます。

残念ながらREST APIでテーブルの行追加はできるのですが、列追加はできません…
kintoneのフォームの設定画面より、追加したい食材のフィールドを追加する必要があります。

Tomosukeさん
何度もコメントありがとうございます!

すいません、組んでたのカスタマイズ表示のプログラムでした。
店舗ごとに表示する食材が違ったりするので、
ループで回して変更する箇所を一箇所で済むようにしたいです。
勘違いした投稿してしまい、すいませんでした。

kajitaさん

カスタマイズビューだったのですね。

店舗によってどの食品を列に入れたいかが変わるということなので、
どうしてもA店の場合は[〇〇, △△, ××]、B店の場合は[〇〇, △△, ××, ◇◇]などと指定してあげる必要があります。
ループ処理をする時に、値を入力しようとしている食品が、店舗それぞれの食品配列にあるかどうか判定してからinsertするようにしてはどうでしょうか?

Tomosukeさん
コメントありがとうございます。

>ループ処理をする時に、値を入力しようとしている食品が、店舗それぞれの食品配列にあるかどうか判定してからinsertするようにしてはどうでしょうか?

はい。これで進めたいです!
人のソースとか見て組んでまして。
重要なループのところでは、エラーがでてしまい。
全然わからず、試行錯誤している状態です。

var data = [
[‘A店’,
‘納品日’,‘納品時間’,‘納品(その他)’,
‘麺’,‘チャーシュー’,‘メンマ’,‘ネギ’,‘玉子’,‘鶏油’,‘かえし’,‘その他’],
[‘B店’,
‘納品日’,‘納品時間’,‘納品(その他)’,
‘麺’,‘生チャーシュー肉’,‘メンマ’,‘ネギ’,‘玉子’,‘ゆず’,‘鶏油’,‘その他’],
[‘C店’,
‘納品日’,‘納品時間’,‘納品(その他)’,
‘麺’,‘チャーシュー’,‘メンマ’,‘鶏モモ’,‘鶏油’,‘温泉たまご’,‘その他’]
];
var tabletd;
var row = tabletd.insertRow(tabletd.rows.length);
var records = event.records;
for (i = 0; i < records.length; i++) {
record = records[i];
for( i = 0; i< data.length; i++ ) {
if(record.店名.value == data[i][0]){
(cell+i) = row.insertCell(i);
cell+i.innerHTML = record.data[i].value;
}
}
}

kajitaさん

確認が遅れてすみません。
カスタマイズビューの元となるレコード詳細画面では、テーブルは1つのみ設置されている状態で合っていますでしょうか?

店舗によって項目に必要な食品が違うということだったので、もしかしたらテーブルも店舗ごとに分けられているかもと思い確認です。

Tomosukeさん
コメントありがとうございます!

すいません、元となるレコード詳細画面がどれに当たるのかがわからないです。
左上の(すべて)の箇所の表示でしたらテーブルは1つです。

出来上がりは、分けた方が見やすいかと思い、店舗ごとに分けてます。
これで伝わるのかわからないです、申し訳ないです!

 

kajitaさん

ありがとうございます。
詳細画面というのはこの画面を指していました。

こちらの記事を元に、サンプルコードを書いてみたのでご参照いただけると嬉しいです!
同じような処理がされているところは、もう少しスマートにも書けると思います。

出来上がりのカスタマイズビューはこんな感じです↓

 

実用向けとなると、レコード件数が増えた時に縦がとても長くなってしまうので、
ページ送りや表示する期間で絞り込むなどの対応も必要になってくるかと思います。

Tomosukeさん

コメントありがとうございます。
サンプルコードまで頂きすごく助かります!ありがとうございます!

頂いたサンプルコードのswitch内をループで回したら、
すごく管理が楽になり、ミスも少なくなると思うので、
下の部分をループにしたいです。

var cellA1 = rowA.insertCell(0);
var cellA2 = rowA.insertCell(1);
var cellA3 = rowA.insertCell(2);
var cellA4 = rowA.insertCell(3);
cellA1.innerHTML = dateString;
cellA2.innerHTML = record.noodle.value;
cellA3.innerHTML = record.chashyu.value;
cellA4.innerHTML = record.mennma.value;

いけますでしょうか。よろしくお願いします!

kajitaさん

そこ横着してましたね^^;

こちらでいかがでしょうか?こうすると、店舗ごとに食品が増えても変更箇所はshopA~C, codeA~Cの配列のみになります。

また、初期設定では店舗ごとのテーブルデータはレコード登録順になっています。
実際には納品日時で並べ替えた方がいいと思うので、カスタマイズビューの設定画面>絞り込み>ソートで工夫してみてください。

細かいですが、数値だと右寄せが自然なので、HTML側でtext-alignを指定する変更もしています。

Tomosukeさん

ありがとうございます!!
かなりすごいです!!!
かなり参考にさせてもらって、しっかり勉強します!!
ありがとうございます!!

Kajitaさん

お役に立てていれば嬉しいです!

CSSもアレンジしてみてください。

Tomosukeさん

手間取りましたが、入力の登録の際に未入力には0が入るようにして、完成しました!
欲を言えば、発注なしにしたかったりするのですが。。。
勉強してなんとかなるように頑張ります!

大変助かりました。ありがとうございました!!