Question

function GetEmp() {
 $.ajax({
     type: "POST",
     url: "EMService.asmx/GetEmployee",
     data: '{}',
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg, status, metaData) {
            if (msg.d && msg.d.length > 0) {
                BindTable(msg.d); 
            }
        },
 });
}

绑定json（集合）

function BindTable(data) {
    $('#tblEmployee tr:gt(0)').remove();
    $("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}

<script id="employeeTemplate" type="text/html">
    <tr>
        <td>${Id}</td> 
        <td>${Code}</td>
        <td>${Name}</td>
     </tr>
</script>

Answer 1

您只需在模板中添加一个删除按钮，并绑定一个事件处理程序（event delegation在这里效果很好）：

<script id="employeeTemplate" type="text/html">
    <tr>
        <td>${Id}</td> 
        <td>${Code}</td>
        <td>${Name}</td>
        <td><button data-id="${Id}" class=".delete" type="button">Delete</button></td>
     </tr>
</script>

事件处理程序：

$('#tblEmployee').on('click', '.delete', function() {
    var $this = $(this);
    var id = $this.data('id');
    // this is where you would make the Ajax call to remove the record from
    // the server
    deleteRecord(id).then(function() {
       // at some point, e.g. after the Ajax request was successful, you  
       // would also remove the row
       $this.closest('tr).remove();
    });
});

deleteRecord的位置如下：

function deleteRecord(id) {
    return $.ajax({ ... });
}

这使用了jqXHR的promise接口。您可以找到更多about promises in the jQuery tutoria l。

Answer 2

尝试以下代码，您可以将删除按钮添加到具有不同ID的每一行

function BindTable(data) {
    $('#tblEmployee tr:gt(0)').remove();
    $("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}

将按钮添加到模板

<tr>
    <td>${Id}</td> 
    <td>${Code}</td>
    <td>${Name}</td>
    <td><input type="button" value="Delete" id="delete${Id}"></td>
</tr>

无法将删除按钮添加到表中的所有行

2 个答案: