php - 从数据库中成功删除后，AJAX 删除表行而不重新加载页面

Question

我有一个使用 AJAX 填充的表。每个表行都根据我的数据库中的记录 id 给出一个 id。表格下方是 3 个按钮：NEW、EDIT 和 DELETE。

当我选择一行时，我将 DELETE 按钮的 data-id 设置为单击行的 ID。当我单击 DELETE 时，我的 AJAX 调用继续从我的数据库中删除所有具有 DELETE 按钮的 data-id 的记录。

这一切都完美无缺。一切都完成后，我收到警报数据已被删除。这是伟大的。

我的问题是：在我的 AJAX 调用的 If (data ==1) 部分中，如何在不刷新页面的情况下从表中删除行、淡出，就像我现在必须做的那样。

这是我的 index.html 代码

<div class="container-fluid inputwrapper">
    <table id="workRequests" style="width: 100%;">
       //table is filled by ajax call to db below is an example of the format
       <tr class="table__row" id="124108" onclick="highlight_row()">
          <td class="table__content" data-heading="Number">124108</td>
          ....
      </tr>
    </table>
</div>
<div class="container-fluid">
<div class="row center-block">
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;">&nbsp;</div>
<div class="text-center col-sm-8" style="float: left;">
<button style="margin-right: 10px;" type="button" class="btn btn-default" id="wopnew" onClick="createNew()">New</button>
<button style="margin-right: 10px;" type="button" class="btn btn-default" disabled id="wopedit" onClick="editFile()">Edit</button>
<button  type="button" class="btn btn-default" data-id="0"  id="wopdelete">Delete</button>
</div>
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;">&nbsp;</div>
</div>

这是我的 AJAX 调用。我是编码新手，从我所看到的我 Step 认为我的浏览器中的功能 - var 元素设置为 DELETE 按钮 data-id 所以当我们到达成功部分和 data == 1 时没有任何反应它专注于删除按钮而不是表格行。

我试图将元素更改为我的表的 id，但这也不起作用。

<script>
$(document).on("click","#wopdelete",function(){  
    if (confirm("Are you sure you want to delete this Record?  It can NOT be recoverd!!")) { 
        
        var id = $(this).data('id');  
        var element = this;  
        $.ajax({  
            url :"./scripts/delRecord.php",  
            type:"POST",  
            cache:false,  
            data:{deleteId:id},  
            success:function(data){  
                if (data == 1) {  
                    $(element).closest('tr').fadeOut(400, function(){
                        $(this).remove();
                    });
                     
                    alert("User record deleted successfully");       
                }else{  
                    alert("Record did not delete properly!");  
                }  
            } 
        });  
    }  
});  
</script>

标签： phpajaxrow