サブテーブルの一行ごとに背景色をつけたい

kintone カスタマイズ
1

お世話になっております。

サブテーブルの奇数行に別の背景色を加え、見やすくしたいと考えております。

調べながらコードを書いてみたのですが、エラーになってしまい、行き詰っております。

知恵をお貸しください。よろしくお願いいたします。

(function ()
{
  'use strict';
  var events = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show'
  ];

  kintone.events.on(events, function (event)
  {
    var record = event.record;
    var Table = record['Item']['value'];
    for (var i = 0; i < Table.length; i++) {
      if (i % 2 == 0) {
        var subTable = document.getElementById(Table[i]);
        subTable.style.backgroundColor = "black";
      } else {
        var subTable = document.getElementById(Table[i]);
        subTable.style.backgroundColor = "white";
      }
    }
    return event;
  });
})();
2

var subTable = document.getElementById(Table[i]);
Table[i]は要素のIDではないので、この1行を実行するとsubTableの値はnullになると思います。
エラーが表示されたらまずはデバッグする癖をつけると、問題を解決しやすくなります。
動かない？そんな時はデバッグをしてみよう！入門編

行の色変更についてはcssでやった方が楽です。必要に応じて変更してください。

3

質問者様と同じように、サブテーブルを奇数偶数で色分けしようとしておりました。

js初心者のためレコード詳細画面のみの反映でコードが冗長ですが、完成形は以下のようになります

少しでも参考になれば嬉しいです。

【手順】

1.サブテーブルに隠し項目を作る

2.隠し項目に行数が奇数か偶数かで特定の値を出力させる

3.隠し項目の値によって背景色を変える

 

以下の既出の質問をもとに作成しています。

『レコード詳細画面でサブテーブルの値によってセルの文字色を変更する』

https://developer.cybozu.io/hc/ja/community/posts/360041567291

こちらの質問者さんはサブテーブルの値によって背景色を変えられるようにしているので

ほぼこのコードを使わせていただき

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

var secondItemName = tableRecords[j].value[‘対応状況’].value;
if (secondItemName == ‘取り組み中止’) {
targetRow.push(j+1);

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

の部分を以下に変えています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

var secondItemName = tableRecords[j].value[‘number’].value;
if (secondItemName == ‘2’) {
targetRow.push(j+1);

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

画像には表示されていませんが

サブテーブルに隠し項目(レコード詳細画面で非表示にしている)「number」があり、

numberには行数をカウントし奇数なら1,偶数なら2が入るようにしてあります。

 

以上、このような感じになっています、よろしくお願いします。

4

Ryoji様

ご教示頂きありがとうございます。

CSSにこんな便利なクラスがあるとは知りませんでした。

無事解決いたしました。ありがとうございました。

5

本田愛香様

ご教示頂きありがとうございます。

このやり方であれば複雑な色分けにも対応できますね！

頂いた内容を参考に試してみます。ありがとうございました。

6

Ryoji様

モバイル版では以下の方法では色は変わりませんでした。（モバイルにおいてテーブルを１行ずつ色を変えたい）

.subtable-gaiatr{
background: white;
}
.subtable-gaiatr:nth-child(even){
background:#CCFFFF;
}
7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。