Tips

kintoneにおけるテーブル操作の基本（行の削除）

目次

はじめに

固定リンクがコピーされました

本記事では、サンプルアプリをもとに、テーブルの行の削除について解説します。
テーブルの構造と行の追加方法や更新方法については、次の記事を参照してください。

サンプルアプリ：テーブル操作

固定リンクがコピーされました

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/313/ (External link)
ログイン情報は cybozu developer networkデモ環境で確認してください。

このアプリの仕様については kintoneにおけるテーブル操作の基本（テーブルの構造・行の追加） | デモ環境で解説しています。

行を削除するサンプルコード

固定リンクがコピーされました

本記事では デモアプリのサンプルコードから、テーブルの行を削除するサンプルコードを抜き出して紹介します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/*
 * テーブル操作（行削除）のサンプルコード
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (e) => {

    // 削除ボタンを設置
    const deleteSpace = kintone.app.record.getSpaceElement('deleteSpace');
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = '削除';
    deleteButton.onclick = deleteRow;
    deleteSpace.appendChild(deleteButton);
    return e;
  });

  // 行削除関数
  const deleteRow = () => {
    const record = kintone.app.record.get().record;
    const targetRowNo = record.削除_行番号.value;
    record.テーブル.value.forEach((row, i) => {
      if (row.value.行番号.value === targetRowNo) {
        record.テーブル.value.splice(i, 1);
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  };

  // 行番号更新関数
  const resetRowNo = (record) => {
    record.テーブル.value.forEach((row, i) => {
      row.value.行番号.value = i + 1;
    });
  };
})();

JavaScriptカスタマイズ全体の構成

固定リンクがコピーされました

このJavaScriptカスタマイズは、「テーブルの行削除」部分と「スペースフィールドにボタンを設置する」部分に分かれます。
今回は「テーブルの行削除」について解説しますので、「スペースフィールドにボタンを設置する」方法は次の記事を参考にしてください。

レコード詳細画面にボタンを配置してみよう

テーブルの行を削除する処理
21
22
23
24
25
26
27
28
29
30
31
32

  // 行削除関数
  const deleteRow = () => {
    const record = kintone.app.record.get().record;
    const targetRowNo = record.削除_行番号.value;
    record.テーブル.value.forEach((row, i) => {
      if (row.value.行番号.value === targetRowNo) {
        record.テーブル.value.splice(i, 1);
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  };
テーブルの行番号を更新する処理
34
35
36
37
38
39

  // 行番号更新関数
  const resetRowNo = (record) => {
    record.テーブル.value.forEach((row, i) => {
      row.value.行番号.value = i + 1;
    });
  };

以下に、それぞれの部分ごとに解説をします。

行削除処理

固定リンクがコピーされました

JavaScriptの配列操作によって配列を一部削除する必要があります。
配列の一部要素を削除するには、splice()を使います。

テーブルの行を削除するためのコード（例）

splice()には2つの引数が必要です。

  • 1つ目の引数： 何番目の配列なのか。
  • 2つ目の引数： 何個消すのか。

2つ目の行を1行削除するには、次のとおりになります。

1

record.receipts.splice(1, 1);
行削除のイメージ

サンプルアプリのコードの行削除部分の解説

forEach()でループさせて判定処理を行い、対象の行をsplice()で削除する流れになっています。

record取得と削除する行番号取得
23
24

    const record = kintone.app.record.get().record;
    const targetRowNo = record.削除_行番号.value;
forEach()を使ってループし、「削除_行番号」と同じ行をsplice()で削除する
25
26
27
28
29

    record.テーブル.value.forEach((row, i) => {
      if (row.value.行番号.value === targetRowNo) {
        record.テーブル.value.splice(i, 1);
      }
    });
行番号を更新する関数
30

    resetRowNo(record);
ここまでの変更内容をrecordに反映させる
31

    kintone.app.record.set({record: record});

行番号リセット処理

固定リンクがコピーされました

今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットしています。
行番号リセット処理を参考にしてください。

テーブルを一括削除したい場合

固定リンクがコピーされました

テーブルは配列でできていますので、配列の中身を空にすれば一括で削除できます。

1

record.テーブル.value = [];
information

このTipsは、2024年9月版kintoneで動作を確認しています。