動的にtableを追加、削除

Question

function addRow(idx){
    var tags;
    tags += "<tr> <td class=text-center> <button type=button class='btn deleterowbtn'>削除</button></td>";
    tags += "<td class='text-center'><input name='hoge_name" + idx + "' id='hoge" + idx + "' type=checkbox></td>";
    tags += "<td><input name='hoge2" + idx + "' id='hoge2" + idx + "' class=form-control type=text></td>";
    tags += "<td><input name='hoge3" + idx + "' id='hge3" + idx + "' class=form-control type=text></td></tr>";
    $('#hoge_table tbody').append(tags);
};
$("#hoge_add").click(function(){
    // テーブルの行取得
    var idx = $("#hoge_table > tbody > tr").length;
    addRow(idx + 1);
});
// 追加した行を削除
$(document).on("click",".deleterowbtn", function(){
    var row = $(this).closest("tr").remove();
     $(row).remove();
});

現在このようなコードで動的にテーブルの行を追加するコードを記述しているのですがこれで削除するとIDの部分が行を削除したときにIDの数字にズレが出てしまいます。
うまく説明できないのですが追加ボタンを３回クリックすると３行新しく作成されます。このときIDに割り振っている数字は上から1,2,3になるかと思います。
この状態で真ん中の行を削除すると上からIDに割り振っているIDは1,3となってしまいます。この時に削除したタイミングで1,2となるように変更したいです。
どのように変更するば良いかご教授いただければ幸いです。

Comments

[jun68ykt]

各 input の name の値の末尾も、id の変更に合わせて変更するのでしょうか？

[kinisinai]

できればnameの値の末尾も変更したいです。

[miyabi_pudding]

idとnameは変えない方がいいような・・・。
まぁ、変える必要があるのなら別ですが（通常よっぽどの理由がない限り変えるようなものではない）

[jun68ykt]

@obake_ さん
> できればnameの値の末尾も変更
するコードを回答しました。参考になれば幸いです。

[kinisinai]

@jun68yktさん
とても丁寧な解説ありがとうございます。

Answer 1

こんにちは

修正の方針や方法が、色々ありそうですが、以下その一例として回答します。

まず、あるjQueryオブジェクトに対する操作として、当該要素の内側にある <input> の name属性 と id 属性を、 与えられた引数 idx から得られる規則的な値に上書きするプラグインを作成します。

$.fn.setInputsAttrs = function(idx) {
    $('input', this).each(function(i, e) {
        const value = `hoge${i > 0 ? i+1 : ''}${idx}`;
        $(e).attr({
            name: value,
            id: value
        });
    });
}

これによって、 ある <tr> を参照する e があったときに、例えば

$(e).setInputsAttrs(5);

とすると、この<tr> の中に出現する最初 <input> の name属性 と id 属性の値は、 hoge5 になり、2番目の<input> については hoge25、3番目の<input> については hoge35 になります。

次に、上記のプラグインを使うために、 addRow を以下のように修正します。

function addRow(idx) {
    var tags = "<tr><td class='text-center'><button type='button' class='btn deleterowbtn'>削除</button></td>" +
        "<td class='text-center'><input type='checkbox' /></td>" +
        "<td><input class='form-control' type='text' /></td>" +
        "<td><input class='form-control' type='text' /></td></tr>";

    var row = $(tags);
    $('#hoge_table tbody').append(row);

    return row;
};

上記のように、 addRow の中では、各<input> の id と name は設定せずに、先の setIdAndName でそれらの設定を行うようにするため、追加した行のjQueryオブジェクトを返すようにします。

これまでの追加、修正によって、追加ボタンがクリックされたときの処理は以下のように書けます。

$("#hoge_add").click(function() {
    var rowsCount = $("#hoge_table > tbody > tr").length;
    addRow().setInputsAttrs(rowsCount + 1);
});

最後に削除時の修正です。ある行が削除されたとき、その行より後にある行について、idとname を更新します。

$(document).on("click", ".deleterowbtn", function() {
    var row = $(this).closest("tr").remove();
    var removedIndex = $('tr').index(row);

    $(row).remove();

    $('tr').each(function(i, e) {
        if (i >= removedIndex) $(e).setInputsAttrs(i + 1);
    });
});

上記のように、remove する前に、削除される行のインデクスを取っておき、削除した後に、そのインデクスの行も含めた以降の行について、setInputsAttrs を実行します。

以下は、上記の修正後のコードの動作確認用に CodePen に上げたものです。

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/ZEEGxom?editors=1111

以上、参考になれば幸いです。