如何在不刷新页面的情况下更新 HTML 表格内容？ [关闭]答案

【问题标题】：How to update an HTML table content without refreshing the page? [closed]如何在不刷新页面的情况下更新 HTML 表格内容？ [关闭]
【发布时间】：2018-03-13 18:19:03
【问题描述】：

我有一个 HTML 表格，它从数据库中获取一些数据，还有一个用于删除选定记录的按钮。

表格是这样的：

name phone links
john 6562  link1
           link2
           link3
________________
jim 7682   link1
________________
... ...    ....

代码是这样的：

<form method="post" action="#">
 <table>                    
  <thead>
    <tr>
      <th><input type="checkbox"></th>
      <th scope="col">Name</th>
      <th scope="col">Phone</th>
      <th scope="col">Links</th>
    </tr>
  </thead>
  <tbody>   
    <?php
       echo "<tr>";
        echo  "<th><input type='checkbox'></th>";
        echo "<th>".$row['name']."</th>";
        echo "<td>".$row['phone']."</td>";
        echo "<td>";
         echo '<a  href=""></a><br/>';
        echo "</td>";
       echo "</tr>";
     ?>
 </table>
 <input type="submit" value="Delete Selected" name="delete"/>
</form>

现在，当我删除表和数据库的任何记录时，我必须刷新页面才能看到它已被删除。我想要的是当我单击删除按钮时，记录被删除并且表格在页面顶部显示成功消息更新，这可能吗？

【问题讨论】：

绝对有可能——而且有很多方法可以做到。 Angular 可能是目前最流行的。但是你可以直接操作 DOM，或者使用 jQuery 来操作 DOM……只是举出三种方法。
是的，这是可能的。您可以使用 ajax 从您的 php 中获取表，然后使用它来更新 DOM。
How do you parse and process HTML/XML in PHP?的可能重复

标签： javascript php jquery html ajax

【解决方案1】：

在html中

<tbody id="table-body">
    <?php include 'tableBody.php';?>
</tbody>

在您的按钮功能中

$.get("tableBody.php", function(data) {
    $("#table-body").html(data);
});

当按钮功能被触发时，它会向tableBody.php发起AJAX GET请求，然后使用其内容更新id为table-body的<tbody>。

【讨论】：

谢谢你成功了
我这个有问题，使用按钮刷新后，不会保留表格的原始样式。