How to update an HTML table content without refreshing the page?

Question

I have an HTML table that is fetching some data from the database and also a button for deleting selected records .

The table looks like that:

name phone links

john 6562  link1

           link2

           link3

________________

jim 7682   link1

________________

... ...    ....

The code is something like that :

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

Now when I delete any record of the table and the database , I have to refresh the page to see that it's deleted .
What I want is when I click the delete button , The record is deleted and the table is updated with a successful message at the top of the page, Is that possible ?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

in html

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

in your button function

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

When the button function is trigger, it will fire up the AJAX GET request to the tableBody.php, and then use its content to update the <tbody> with id table-body.

How to update an HTML table content without refreshing the page?

Sign up