Question

我有一个按钮#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');
    })
});

Answer 1

您的代码中存在一些错误。

您正在复制ID。你不应该这样做。你需要使用类而不是它。
由于您是动态创建行，因此普通点击事件无效。你需要使用事件委托。

然后你的最终代码将是，

$('#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');
})

使用jquery在表中添加和删除行

1 个答案: