すべての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); 
    } 
} 

だから、私は、行を作成し、tableRef.appendChild(row);でHTMLテーブルにそれらを追加しています、for -loopで、var tableRef = document.getElementById('data_table');と私のHTMLテーブルを参照を取得しています。問題は、任意の後続の$.getJSONコールで、テーブルがさらに追加されることです。すべての呼び出しでテーブルを更新するにはどうすればいいですか？前の通話からデータを削除し、新しい通話からデータを入力しますか？

Answer 1

：

は、だから、このようなものを持っていますデータのみを削除してヘッダーを保持する場合は、tbodyタグ内の行を削除します。つまり、$("#data_table tbody tr").remove();

Answer 2

trの子をすべて削除するには、jQueryを使用して$("#data_table tr").remove();を使用します。あなたは、それはまた、テーブルのヘッダを削除することを

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

     } 

    }); 

注サーバーからデータを取得した後、行を削除することができ

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