我想从使用动态表单创建的表中删除任何行,因此单击“添加”按钮时可以自动增加表的行数。我想从表中删除任何行。行数为1时删除该行,键不出现,但行数多于1时,会出现任意行的删除按钮。我已经制作了 html 和 javascript。
<table class="table table-striped area-table tabel-form-makanan">
<thead>
<tr>
<th>Nama Makanan</th>
<th>Jenis Makanan</th>
<th>Harga Makanan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
<input type="hidden" name="id-makanan[]" class="id-makanan"/>
</td>
<td>
<input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
</td>
<td>
<input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/>
</td>
</tr>
</tbody>
</table>
<button class="btn tombol-reset-makanan" style="float: right;">Reset</button>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>
和这个 javascript (jquery)
$('.tombol-tambah-makanan').on('click', function(){
var tr = '<tr>\n\
<td><input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
<td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
<td><input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
</tr>';
$("table.tabel-form-makanan tbody").append(tr);
});
$('.tombol-reset-makanan').on('click', function(){
$('table.tabel-form-makanan tbody tr:not(:first)').remove();
});
如何使用动态表单删除表格的任何行?