AJAX 删除表中选择了 PHP ID 的行 - AJAX Delete row in table with PHP id selected

AJAX Delete row in table with PHP id selected

本文关键字：PHP ID 的行选择删除 AJAX | 更新日期: 2023-09-27

如何

基于此代码使用 AJAX 从表中删除行？

这是我正在使用的PHP代码：

foreach ($results as $result) {
    echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class='"btn btn-sm btn-danger delete_class'" id='"".$result['id']."'" >DELETE</button></td></tr>";
}

如您所见，该按钮有一个与之配对的 id。

这是我的jquery/AJAX代码，用于从数据库中删除文件：

<script>
        var $tr = $(this).attr('parentElement');
        $('.delete_class').click(function(){
            var del_id= $('.delete_class').attr('id');
            $.ajax({
                url:"delete_page.php?delete_id="+del_id,
                cache:false,
                success:function(result){
                    $tr.find('td').fadeOut(1000,function(){
                        $tr.remove();
                    });
                }
            });
        });
</script>

还有一个PHP文件进入数据库并删除数据，工作正常。

在上面的 JavaScript 代码 ^ 中，在顶部设置的变量"$tr"说 'parentAttribute' 是 "td" 而不是 "tr"，我将如何向上增加两个父属性？

我可以更改我的"成功：函数（结果）{ }"以使该行立即消失，因为，

$tr.find('td').fadeOut(1000,function(){
      $tr.remove();
}

此代码 ^ 不起作用。

更改当前jquery代码，如下所示：

<script>    
        $('.delete_class').click(function(){
            var tr = $(this).closest('tr'),
                del_id = $(this).attr('id');
            $.ajax({
                url: "delete_page.php?delete_id="+ del_id,
                cache: false,
                success:function(result){
                    tr.fadeOut(1000, function(){
                        $(this).remove();
                    });
                }
            });
        });
</script>

closest 方法返回所选元素的第一个祖先。https://api.jquery.com/closest/

HTML

<table>
    <thead>
        <tr>
            <th>Page Name</th>
            <th>Page Image</th>
            <th>Action </th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=1"  >Delete</a></td>
    </tr>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=2"  >Delete</a></td>
    </tr>
    </tbody>
</table>

爪哇语

 <script> 
       $("a.dlt").click(function(evt){
    evt.preventDefault();
   if(confirm("It will Delete All detail related to this. Are You Sure? ")){       
      var dis = this;
   $.post($(dis).attr('href'),{'delete':'dlt'},function(resp){
     if(resp == 1){
        $(dis).parent().parent().remove();
            }else{
              alert(resp);
           }
        });
      }
  });
 </script>

试试

tr = $(this).parent();

没有一个名为"parentElement"的属性，这就是它不起作用的原因。

参考： Jquery Docs

我还将函数行更改为：

var del_id = $(this).attr('id');