下記のコードで行追加ボタンをクリックした時にテーブルに行が追加するjQueryを記述したのですが追加自体はできるですが追加した時に行のボタン0ボタンの次のTD内(bangouってクラスを付与しているinputのvalueに代入していきたい)に番号を1行目から順番になるようにしたいのでがやり方が分からず詰まっています。
追加ボタンを押した時のイメージ↓
列1 | 列2 |
---|---|
ボタン0 | 1 |
ボタン0 | 2 |
ボタン0 | 3 |
HTML5
1 2<button id='testtable_row_add'>行追加</button> 3 4<table id='testtable'> 5<tbody></tbody> 6</table>
jQuery
1function addRow(idx){ 2 3 4 5 var tags; 6 7 tags += "<tr> <td class=text-center rowspan='4'> <button type=button data-idx='" + idx + "' class='btn deleterowbtn'>ボタン0</button></td>"; 8 tags += "<td rowspan=4><input class='form-control bangou' type=text value=''></input></td>"; 9 tags += "<td style='display:flex'><input name='hoge[]' id='hoge1" + idx + "' class=form-control type=text readonly><button id='bid" + idx + "' data-serch='" + idx + "' type='button'>ボタン1</button><input name='hogehoge[]' id='hoge2" + idx + "' class='form-control col-2' type=text></td>"; 10 tags += "<td><input name='hogehogehoge[]' id='hoge3" + idx + "' class=form-control type=text></td>"; 11 tags += "<td rowspan=4 class='text-center'><button class='btn' id='hoge4" + idx + "' type='button'>ボタン2</button><button class='btn' type='button'>ボタン3</button></td>"; 12 tags += "<td rowspan=4><textarea name='hogeho[]' id='hoge5" + idx + "' class=form-control type=text></textarea></td>"; 13 tags += "<td rowspan=4><textarea name='hogg[]' id='hoge6" + idx + "' class=form-control type=text></textarea></td></tr>"; 14 tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; 15 tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; 16 tags += "<tr><td colspan=2><input class='form-control' col-2 value=></td></tr>"; 17 18 $('#testtable tbody').append(tags); 19}; 20 21 22$("#testtable_row_add").click(function(){ 23 24 25 var idx = $("#testtable > tbody > tr").length; 26 addRow(idx); 27}); 28
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/26 02:22
2019/10/26 03:31