jQuery
1function addRow(idx){ 2 var tags; 3 tags += "<tr> <td class=text-center> <button type=button class='btn deleterowbtn'>削除</button></td>"; 4 tags += "<td class='text-center'><input name='hoge_name" + idx + "' id='hoge" + idx + "' type=checkbox></td>"; 5 tags += "<td><input name='hoge2" + idx + "' id='hoge2" + idx + "' class=form-control type=text></td>"; 6 tags += "<td><input name='hoge3" + idx + "' id='hge3" + idx + "' class=form-control type=text></td></tr>"; 7 $('#hoge_table tbody').append(tags); 8}; 9$("#hoge_add").click(function(){ 10 // テーブルの行取得 11 var idx = $("#hoge_table > tbody > tr").length; 12 addRow(idx + 1); 13}); 14// 追加した行を削除 15$(document).on("click",".deleterowbtn", function(){ 16 var row = $(this).closest("tr").remove(); 17 $(row).remove(); 18});
現在このようなコードで動的にテーブルの行を追加するコードを記述しているのですがこれで削除するとIDの部分が行を削除したときにIDの数字にズレが出てしまいます。
うまく説明できないのですが追加ボタンを3回クリックすると3行新しく作成されます。このときIDに割り振っている数字は上から1,2,3になるかと思います。
この状態で真ん中の行を削除すると上からIDに割り振っているIDは1,3となってしまいます。この時に削除したタイミングで1,2となるように変更したいです。
どのように変更するば良いかご教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー