AJAX删除表中选择了PHP id的行 [英] AJAX Delete row in table with PHP id selected

问题描述

如何根据此代码使用AJAX从表中删除行？

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

  foreach（$ result 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代码：

 <脚本> 
 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文件进入数据库并删除数据，工作正常。 / p>

在上面的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）。去掉（）; 
}）; 
} 
}）; 
}）; 
< / script> 
  

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

How would you delete a row from a table using AJAX based on this code?

Here's the PHP code I'm working with:

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>";
}

As you can see, the button has an id paired with it.

Here's my jquery/AJAX code to delete the file from the database:

<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>

There is also a PHP file that goes into the database and deletes the data, which works fine.

In the javascript code above ^ the variable being set at the top "$tr" is saying the 'parentAttribute' is the "td" not the "tr", how would I go up two parent attributes?

What can I change my "success:function(result){ }" to to make the row immediately disappear, because,

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

this code ^ isn't working.

解决方案

Change your current jquery code as shown below:

<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>

The closest method returns the first ancestor of the selected element. https://api.jquery.com/closest/

这篇关于AJAX删除表中选择了PHP id的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！