HTML-Tabelle nach jedem AJAX-Aufruf neu laden

Question

Meine sequentiellen AJAX-Aufrufe fügen Zeilen an meine HTML-Tabelle an, die ich nicht möchte. Ich möchte, dass meine Tabelle bei jedem Anruf mit neuen Daten aktualisiert/neu geladen und nicht angehängt wird.

Mein Code:

var data = $('#data_input').val(); 
var tableRef = document.getElementById('data_table'); 

$.getJSON("/data/"+data, function(dataState) 
{ 
    // ... 
    for(var dataId in dataState) 
    { 
     var row = document.createElement("tr"); 
     // creating new cells in a row with the data 
     tableRef.appendChild(row); 
    } 
} 

Also den Verweis auf meine HTML-Tabelle mit Ich holen var tableRef = document.getElementById('data_table'); im for -loop, Ich schaffe Zeilen und sie in die HTML-Tabelle anhängt mit tableRef.appendChild(row);. Das Problem ist, dass bei jedem nachfolgenden $.getJSON Aufruf die Tabelle weiter angehängt wird. Wie aktualisiere ich meine Tabelle bei jedem Anruf, dh. Daten aus dem vorherigen Anruf löschen und Daten von einem neuen Anruf füllen?

Answer 1

Sie die Zeilen, die Daten vom Server löschen können

$.getJSON("/data/"+data, function(dataState) { 

    $("#data_table tr").remove(); 
     //... 

     for(var dataId in dataState) { 


       var row = document.createElement("tr"); 

       // creating new cells in a row with the data 

       tableRef.appendChild(row); 
      } 

     } 

    }); 

Hinweis nach dem Aufstehen, dass es auch die Header der Tabelle entfernen , wenn Sie nur die Daten entfernen und die Header behalten möchten, entfernen Sie nur die Zeilen innerhalb tbody Tag dh $("#data_table tbody tr").remove();

Answer 2

Sie können jQuery verwenden, um alle untergeordneten Elemente des Typs tr mit $("#data_table tr").remove(); zu löschen.

So haben Sie etwas davon haben:

var data = $('#data_input').val(); 
var tableRef = document.getElementById('data_table'); 

$.getJSON("/data/"+data, function(dataState) 
{ 
    // ... 
    $("#data_table tr").remove(); 
    for(var dataId in dataState) 
    { 
     var row = document.createElement("tr"); 
     // creating new cells in a row with the data 
     tableRef.appendChild(row); 
    } 
}