Question

如何根据此代码使用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();
}

此代码^无效。

Answer 1

更改您当前的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/

Answer 2

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>

JavaScript

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

Answer 3

尝试

tr = $(this).parent();

没有名为＆＃39; parentElement＆＃39;这就是它无法正常工作的原因。

参考：Jquery Docs

我还将功能线更改为：

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

AJAX删除表中选择了PHP id的行

3 个答案: