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