我有一个按钮,#add
,单击后会在表中添加一行。新插入行的最后一个单元格有一个删除图标,如果单击该图标,我想删除该行。
我相信我已经完成了 95%,但是当单击删除图标时没有任何反应?这是因为 DOM 需要刷新吗?
$(document).ready(function(){
$('#add').click(function() {
$('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i id='delete' class='fa fa-trash-o'></i></center></td></tr>");
$('#table').editableTableWidget();
});
$('#delete').click(function(){
$(this).closest('tr').remove();
console.log('click');
})
});
最佳答案
您的代码中有一些错误。
- 您正在重复 ID。你不应该那样做。您需要使用类来代替它。
- 由于您是动态创建行,因此正常的点击事件将不起作用。为此,您需要使用事件委托(delegate)。
那么你的最终代码将如下所示,
$('#add').click(function () {
$('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i class='fa fa-trash-o delete'></i></center></td></tr>");
$('#table').editableTableWidget();
});
$('#table').on('click', '.delete', function () {
$(this).closest('tr').remove();
console.log('click');
})
关于javascript - 使用jquery添加和删除表中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33806989/