【Javascript/HTML】テーブルの行追加・削除をボタンを押して動的に操作する

テーブル行の追加・削除を動的に操作するJavascriptです。
ボタンを押すとテーブルに行を追加、または削除を行います。

DEMO

行を追加します

SAMPLE FOR TABLE-ROWADD

SAMPLE FOR TABLE-ROWDELETE

CODE

以下コードです

<script>
    function coladd() {
        var table = document.getElementById("table");
        // 行を行末に追加
        var row = table.insertRow(-1);
        //td分追加
        var cell1 = row.insertCell(-1);
        var cell2 = row.insertCell(-1);
        // セルの内容入力
        cell1.innerHTML = '行を追加しました';
        cell2.innerHTML = 'この行を削除しますか？<input type="button" value=削除" id="coladd" onclick="coldel(this)">';
    }
    function coldel(obj) {
        // 削除ボタンを押下された行を取得
        tr = obj.parentNode.parentNode;
        // trのインデックスを取得して行を削除する
        tr.parentNode.deleteRow(tr.sectionRowIndex);
    }
</script>

行を追加します<input type="button" value="行を追加" id="coladd" onclick="coladd()">
        
<table id="table" border="1">
    <tr>
        <td>
            SAMPLE FOR TABLE-ROWADD
        </td>
        <td>
            SAMPLE FOR TABLE-ROWDELETE
        </td>
    </tr>
</table>

解説

追加

var table = document.getElementById("table");でテーブルのIDを取得してます。

そこからvar row = table.insertRow(-1);の記述でテーブルの最後の行に新たに追加しています。
-1で行末をあらわしてます。0と指定したら1行目を表します。

var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);

上記コードで追加した行の中にセルを追加しています
ここでも-1はセルの末尾を現しています。

※今回のテーブルは2列なので2つのセルを用意しています。
読み込むテーブルによってここの操作は変えてください。

最後にcell1.innerHTMLでセル内に文字を入れています。

---

削除

tr = obj.parentNode.parentNode;で削除ボタンが押下された行を取得して
tr.parentNode.deleteRow(tr.sectionRowIndex);で取得した行を削除しています。

全削除

別で全行削除(1行目だけ残す)ボタンも紹介します。

function alldel() {
    var table = document.getElementById("table");
    var rowLen = table.rows.length;
    //上の行から削除していくと下の行がずれていくので下から検査
    for (var i = rowLen-1; i > 0; i--) {
        table.deleteRow(i);
    }
}

<input type="button" value="複数削除" onclick="alldel()">

上記コードは一番下の行から順番に削除しています。

上から行を削除したい場合は

    for (var i = rowLen-1; i > 0; i--) {
        table.deleteRow(1);
    }

処理速度は大して変わらないと思います（速度テストは行っていません）