jQueryを使用した行追加・削除

#jQuery

この記事を書いたチーム：frontier

はじめに
サンプルコード
最後に

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

HTMLをJavaScriptで動的に操作できる、jQueryを使用してテーブルの行追加削除のサンプルコードを記述いたしました。基本はtableタグを使用しますが、今回はdivタグで書いています。

サンプルコード

・HTMLコード

<button id="addRow">行追加</button>
<button id="delRow">行削除</button>

<!—テーブル部分-->
<div id="table" border="1">
    <div id="row-1">
       <input type="text" id="txb-1" name="name-1"/>
    </div>
    <div id="row-2">
       <input type="text" id="txb-2" name="name-2"/>
    </div>
    <div id="row-3">
       <input type="text" id="txb-3" name="name-3"/>
    </div>
</div>
<div id="dummy-table" border="1" style="display:none;">
    <div id="dummy-row-">
       <input type="text" id="txb-" name="name-"/>
    </div>
</div>
@Html.HiddenFor(m => m.DelRowNum, new { id = "hdnDelRowNum" })

<!—テーブル部分-->

</div>

</div>

</div>

</div>

@Html.HiddenFor(m => m.DelRowNum, new { id = "hdnDelRowNum" })

画面表示用のテーブルid=”table”とは別にid=”dummy-table”を作成しておきます。
このときid=”dummy-table”はstyle=”display: none;”を設定して画面には見えないようにしておきます。

・jQueryコード

// 行を追加する関数
$("#btnAddRow").off("click").on("click", function (e) {
    var currentNo = 0; 
    currentNo = $("[id^=row-]").length;　 //現在の総行数

　　//　ダミー行の要素をコピー
    var newRow = $("#dummy-table").clone(true);

    // 新規行の属性を設定する
    // 書き方1
    newRow.find("#dummy-row-").attr({
        id: "txb-" + (currentNo+1),
        name: "name-" +  + (currentNo+1),
    });

    newRow.attr({
        id: "row-" + (currentNo+1)
    });

　　// 書き方2
    $("txb-" ,newRow).attr("id","txb-" + (currentNo+1));
    $("dummy-row-" ,newRow).attr("id","row-" + (currentNo+1));
    $("dummy-row-" ,newRow).attr("name","name-" +(currentNo+1));

    // 最終行に追加
    $("#table").append(newRow);

});

// 行を削除する関数
$("#btnAddRow").off("click").on("click", function (e) {
    //削除対象行をhiddenで持っておく
    var delRowNum = $("#hdnDelRowNum").val();
    $("#table div").eq(delRowNum).remove();
});

// 行を追加する関数

$("#btnAddRow").off("click").on("click", function (e) {

var currentNo = 0;

currentNo = $("[id^=row-]").length;　 //現在の総行数

　　//　ダミー行の要素をコピー

var newRow = $("#dummy-table").clone(true);

// 新規行の属性を設定する

// 書き方1

newRow.find("#dummy-row-").attr({

id: "txb-" + (currentNo+1),

name: "name-" + + (currentNo+1),

});

newRow.attr({

id: "row-" + (currentNo+1)

});

　　// 書き方2

$("txb-" ,newRow).attr("id","txb-" + (currentNo+1));

$("dummy-row-" ,newRow).attr("id","row-" + (currentNo+1));

$("dummy-row-" ,newRow).attr("name","name-" +(currentNo+1));

// 最終行に追加

$("#table").append(newRow);

});

// 行を削除する関数

$("#btnAddRow").off("click").on("click", function (e) {

//削除対象行をhiddenで持っておく

var delRowNum = $("#hdnDelRowNum").val();

$("#table div").eq(delRowNum).remove();

});

現在のテーブルの総行数を取得して使用する場合は、$(“[id^=row-]”).length; で行数を取得できます。
$(“[id^=row-]”)はid=”table”内の要素で「row-」に前方一致するidを探してくれます。
$(“#dummy-table”).clone(true);でid=”dummy-table”の要素を丸ごとvar newRowとしてコピーしています。
newRow内の要素はdummy-tableの要素のままになっているので、属性の名称等を変えていきます。

書き方1と書き方2で書き方は変えていますが、処理は同じことをしています。
.attr()では指定した属性の名称を変更する操作ができます。
書き方1ではnewRow内にあるid=dummy-row- を検索して、その中身のidとnameを上書きしています。
id=dummy-row-という名称も変えなければいけないので、別でid書き換え操作を行っています。

書き方2ではこちらの↓1文を例とすると
$(“txb-” ,newRow).attr(“id”,”txb-” + (currentNo+1));　
newRow内にあるid= txb-を検索して .attr() の第一引数で「変更したい属性」を指定し、第二引数で変更後の名称を指定しています。
そうすると、newRowのid= txb-はid= txb-4に変更されます。

それぞれ、ダミーの新規行に対して、idやnameの属性を既存のテーブルの属性名称に合わせた後、$(“#table”).append(newRow);でテーブルに新規行を追加しています。
append()は挿入するという操作が行えて、指定したテーブルに対して自動に最終行に行を追加してくれます。

行削除については、指定したidに対してremove()を行うとその要素は削除されるので、hidden項目等で対象行のNoなどを持っておくと削除対象行をテーブルから削除する操作が行えます。