每次AJAX調用後重新加載HTML表格

Question

我的順序AJAX調用將行附加到我不想要的HTML表格。我希望我的表在每次調用新數據時刷新/重新加載，而不是附加。

我的代碼：

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); 
    } 
} 

所以我的讀取與var tableRef = document.getElementById('data_table');參考我的HTML表格，在for -loop，我創建行，並將它們與tableRef.appendChild(row);附加到HTML表格。問題是，在任何連續的$.getJSON調用中，表都會被進一步追加。如何在每次通話中刷新我的表格，即。刪除以前呼叫的數據，並填入新呼叫的數據？

Answer 1

您可以從服務器獲取數據

$.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); 
      } 

     } 

    }); 

注意，它也將刪除表的標題後刪除行如果只想刪除數據並保留標題，則只刪除tbody標記中的行，即$("#data_table tbody tr").remove();

Answer 2

您可以使用jQuery刪除類型爲tr的每個孩子與$("#data_table tr").remove();。

所以你有這樣的事情：

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); 
    } 
}