Javascript 显示更新的表格而不刷新或重新加载页面

我有一个表显示我的产品列表，我使用jQuery删除产品而不重新加载页面，但是更新的表不会显示，除非我刷新页面

我试图用不透明度来隐藏它，但它仍然不起作用

这是我的php代码

<div class="table-stats order-table ov-h">
 <table id="bootstrap-data-table" class="table ">
 <thead>
 <tr>
 <th>Image</th>
 <th>Name</th>
 <th>Availability</th>
 <th>Category</th>

 <th>Total Ordered</th>

<th>Edit</th>

<th>Delete</th>   
                          
 </tr>
 </thead>
 <tbody id="data-table">

<?php

$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");

mysqli_stmt_execute($stmt_1);

$result = mysqli_stmt_get_result($stmt_1);

while($row = mysqli_fetch_array($result)){ ?>


<div class="product">
<tr class="product">

<?php

$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";

$stmt_img = mysqli_prepare($link, $sql_img);

mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);

$param_pro_id = $row["pro_id"];
$param_limit = 1;

mysqli_stmt_execute($stmt_img);

$img_results = mysqli_stmt_get_result($stmt_img);

$image = mysqli_fetch_assoc($img_results);



?>


  <td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
  <td><?php echo $row["pro_name"]; ?></td>

<td><?php echo $row["pro_quantity"]; ?></td>
                                            
 <?php 

$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";

$stmt_category = mysqli_prepare($link, $sql_category);

mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);

$param_cat_id = $row["pro_category"];

mysqli_stmt_execute($stmt_category);

$result_category = mysqli_stmt_get_result($stmt_category);


$category = mysqli_fetch_assoc($result_category);


?>   


<td>  <?php echo $category["cat_name"]; ?>  </td>
                 

<?php

$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";

$pro_stmt = mysqli_prepare($link, $pro_ord);

mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);

mysqli_stmt_execute($pro_stmt);

$pro_res = mysqli_stmt_get_result($pro_stmt);

$pro = mysqli_fetch_array($pro_res);


?>


<td><?php echo $pro["total"]; ?></td>

       
 <td><a href="update_product.php?id=<?php echo $row["pro_id"]; ?>"><span class="badge badge-success"><i class="ti-pencil"></i></span></a>

</td>

<td>

<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>

</td>        

</tr>                                           
            
</div>                                
<?php } ?>                                    
                                            
 </tbody>
 </table>
</div>
           

这是删除代码

 $pro_id =$_POST['id'];

 $delete = "DELETE FROM products WHERE pro_id= ?"; 

$results = mysqli_prepare($link, $delete); 

mysqli_stmt_bind_param($results, "i", $param_pro_id);

$param_pro_id = $pro_id;

mysqli_stmt_execute($results);
  

---

据我所知，这是不可能的，因为PHP在服务器端运行，javascript/jquery在客户端运行。PHP代码在调用页面时立即运行，因此为了显示更新的表，需要重新加载页面。

---

同样，我不确定我在这方面是否100%正确。

当您针对要刷新的div时，需要更加具体，例如：

success: function(){
    $("#div_id_you_want_refresh")
    .load("your_entire_url" + "#div_id_you_want_refresh");
}

---

您可以在

删除数据

功能中传递

此

，其中

此

引用单击的当前元素，即：您的按钮。然后，在success函数内部，使用该函数隐藏

.product

元素

演示代码：

函数删除_数据（d，el）{
var-id=d；
if（确认（“是否确实要删除此产品？以后无法撤消此操作”））{
/*$.ajax({
类型：“post”，
url:“products.php”，
数据：{
id:id
},
成功：函数（）{*/
//使用此选项，然后删除最近的产品tr
$（el）.最近的（“.product”）.动画（“快速”）.动画({
不透明度：“隐藏”
}“慢”）；
/* }
});*/
}
}

形象
名称
可利用性
类别
订购总数
编辑
删除
smwthing
1.
防抱死制动系统
1222
x
smwthing
12
abs1
12221
x

实际上我已经这样做了，但是在图像上，在删除图像时，div会逐渐消失并隐藏起来，但它似乎对我的table@BrowynLouis好的，我在这方面做了更多的研究，您可能需要使用ajax，这在php中是不可能的内部成功？指定divwhere is

。记录

元素？你能详细解释一下吗？对不起，它被错误地复制了。。。我将其编辑为正确的元素。这在某种程度上是有效的。。。但是它只是把桌子嵌套在同一张桌子下面。你能试着聚焦桌子周围的div吗？它也有同样的作用…谢谢你的魅力

success: function(){
    $("#div_id_you_want_refresh")
    .load("your_entire_url" + "#div_id_you_want_refresh");
}