我如何使用jquery更新和删除表的每一行

时间:2017-08-04 06:06:34

标签: jquery

这是我桌子的截图:

enter image description here

我想更新每一行并使用jquery删除。 我如何动态地执行此更新和删除操作。 以下是我的代码:

$.post("showEmployeeList", function(data){

    var dataTable = '<table class="table"><tr><th>ID</th><th>Name</th><th>Address</th><th>Update</th><th>Delete</th></tr>';

    for(var key in data){
        dataTable += '<tr><td>' + data[key].id + '</td><td>' + data[key].name + '</td><td>'
        + data[key].address + '</td><td><input type="button" id="update" value="Update" class="update" onclick="updateEmaployee()></td><td><input type="button" id="delete" value="Delete" class="delete" onclick="deleteEmployee()></td></tr>';
    }

    dataTable += '</table>';

    $("#divDataTable").html(dataTable);
}

1 个答案:

答案 0 :(得分:0)

for(var key in data){
    dataTable += '<tr><td class="id">' + data[key].id + '</td><td class="name">' + data[key].name + '</td><td class="address">'
    + data[key].address + '</td><td><input type="button" value="Update" class="update"></td><td><input type="button" value="Delete" class="delete"></td></tr>';
}

删除行

$(".delete").on("click",function(){
$(this).parent().parent('tr').remove();
});

更新行

$(".update").on("click",function(){
$(this).parent().parent('tr').find('.id').text("updated id");
$(this).parent().parent('tr').find('.name').text("updated name");
$(this).parent().parent('tr').find('.address').text("updated address");
});