Wie aktualisiert man einen HTML-Tabelleninhalt, ohne die Seite zu aktualisieren?

Question

Ich habe eine HTML-Tabelle, die einige Daten aus der Datenbank abruft und auch eine Schaltfläche zum Löschen ausgewählter Datensätze.

Die Tabelle sieht wie folgt aus:

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

Der Code so etwas wie das ist:

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

Nun, wenn ich jeden Datensatz der Tabelle löschen und die Datenbank, ich habe die Seite aktualisieren um zu sehen, dass es gelöscht ist. Was ich will ist, wenn ich auf die Schaltfläche zum Löschen klicken, der Datensatz gelöscht wird und die Tabelle mit einer erfolgreichen Nachricht am oberen Rand der Seite aktualisiert wird, ist das möglich?

Answer 1

in html

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

in Ihrer Tastenfunktion

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

Wenn die Tastenfunktion Trigger ist, wird es die AJAX GET-Anforderung an die tableBody.php anwerfen und dann seinen Inhalt verwenden zu aktualisieren die <tbody> mit id table-body.