从页面删除数据库行而不刷新

Question

我有一个脚本，可以从数据库中删除行，但效果很好，但是问题是我必须刷新页面才能看到更改，在客户端，我有一个表，其中显示了所有行，如何删除tr，td是动态地从页面刷新而没有刷新吗？ 我希望js代码就足够了。

JS：

$(".delete_button").click(function () {
    var delete_id = $(this).attr('name');
    $.ajax({
        type: "POST",
        url: 'delete.php',
        data: {
            'variable': delete_id
        },
        success: function (html) {
            alert(delete_id);
        }
    });
});

Answer 1

有两种方法可以做到这一点

1. 您应该跟踪要删除的记录的行，让我们用delete_id进行说明，如下所示

   <tr id="delete_id"><td><a href="#">Delete Link</a></td></tr>

   然后在您的点击功能中

    $ ( ".delete_button" ).click ( function () { var delete_id = $ ( this ).attr ( 'name' ); $.ajax ( { type : "POST", url : 'delete.php', data : { 'variable' : delete_id }, success : function ( html ) { $ ( "#" + delete_id ).remove () } } ); } ); 

2. 不跟踪它取决于html结构

   <tr id="delete_id"><td><a href="#">Delete Link</a></td></tr>

   JS

    $ ( ".delete_button" ).click ( function () { var delete_id = $ ( this ).attr ( 'name' ); var anchorLink = $ ( this ); $.ajax ( { type : "POST", url : 'delete.php', data : { 'variable' : delete_id }, success : function ( html ) { anchorLink.parent ().prent ().remove (); } } ); } ); 

Answer 2

在success处理程序中删除该行。 这样的事情。

$(".delete_button").click(function(){
    var $this = $(this);
    var delete_id = $(this).attr('name');
    $.ajax({
        type: "POST",
        url: 'delete.php',
        data:{'variable': delete_id},
        success:function(html) {
        alert(delete_id);
        //now remove the row
        $this.parent('tr').remove();
        }
    });
});