JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

行を削除する機能を備えたテーブルを動的に生成します。

実装のアイデア

1. テーブルの<tbody>要素を取得する
2. 通常はデータベースから入力するデータを取得するか、テスト用にデータセットをシミュレートします。データはオブジェクトの形式で保存されます。複数行のデータを配列に保存することができ、配列内の各項目はオブジェクトです。
3. ① オブジェクト配列をループして行を作成します。
②ループをネストする - - - オブジェクトをループします。
a. 属性に応じて必要な数のセルを作成します。
b. セルに値を割り当てます。
c. 次に行にセルを追加します。
③セルを追加し、テキストコンテンツに「削除」というリンクを割り当て、セルを行に追加します
4. tbodyに新しい行を追加する
5. すべての要素を取得する - - -document.querySelectorAll('a') でオブジェクト配列を取得する
6. a オブジェクト配列をループし、クリックイベントを a リンクにバインドして、削除関数を追加します - - -tbody.removeChild(this.parentNode.parentNode);

コードサンプル

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>テーブルを動的に生成する</title>
    <スタイル>
        テーブル {
            境界線: 1px ピンク
            境界線の折りたたみ: 折りたたみ;
        }
        
        スレッド {
            背景色: #ddd;
        }
    </スタイル>
</head>

<本文>
    <表の境界線="1" セルパディング="5" セル間隔="0" 配置="中央" 幅="600px">
        <頭>
            <tr>
                <th>名前</th>
                <th>件名</th>
                <th>結果</th>
                <th>オペレーション</th>
            </tr>
        </thead>
        <t本文>

        </tbody>
    </テーブル>
    <スクリプト>
        var tbody = document.querySelector('tbody');

        var リスト = [{
            '名前': 'スポンジ・ボブ',
            '件名': 'JavaScript',
            '年齢': 66
        }, {
            '名前': 'デュオ・リー・アイ・メン',
            '件名': 'JavaScript',
            '年齢': 99
        }, {
            '名前': 'スティッチ',
            '件名': 'JavaScript',
            '年齢': 60
        }, {
            '名前': 'ピカチュウ',
            '件名': 'JavaScript',
            '年齢': 88
        }];

        (var i = 0; i < list.length; i++) の場合 {
            // 1. 行を作成する var tr = document.createElement('tr');

            // 2. データを入力する for (var k in list[i]) {
                console.log(リスト[i][k]);
                // 1. td セルを作成する var td = document.createElement('td');
                //セルにコンテンツを入力する td.innerHTML = list[i][k];
                // 2. セルを追加します tr.appendChild(td);
            }
            // 3. リンクを追加および削除する var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;" >削除</a>';
            tr.appendChild(td);
            // 4. 行を追加します tbody.appendChild(tr);
        }

        // 削除関数を追加します var as = document.querySelectorAll('a');
        (var i = 0; i < as.length; i++) の場合 {
            as[i].onclick = 関数() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        コンソールにログ出力します。
        コンソールにログ出力します。
    </スクリプト>
</本文>

</html>

ページ効果: