各Jsonコールの後にJson結果でテーブルを上書きします

Question

私は早期質問に関するヘルプを求めています。私は、Json形式のデータを返す別のスクリプトを呼び出すスクリプトを用意しています。

現在のスクリプトは、JQueryを使用して動的に作成されたhtmlテーブルを作成します。私が持っている問題は、新しい/新鮮なデータの別の呼び出しが行われ、テーブルのデータが更新/リフレッシュされていない場合です。スクリプトが「追加」を使用しており、私がhtml()またはtext()を使用しているため、データが更新されていないことが指摘されています。私が持っている問題は、コードを変更するときにどこから始めるべきかわからないので、新しいデータを呼び出すたびに、表示されたデータが更新/上書きされるようになります。誰かが助けてくれますか？

マイコード：

$(document).ready(function() { 

function get_data() { 
cache: false, 
    $.getJSON("get_data_logos.php", function(json){ 

    json = json[0].data; 

    var tr ; 
    for (var i = 0; i < json.length; i++) { 
    // console.log(json[i].ClientImageName); 

     tr = $('<tr/>'); 
     tr.css("border-bottom","2px solid #FFF"); 
     tr.append("<td width='15%'><div class='clientimage'><img src='../../../../conf_images/boards/" + json[i].ClientImageName + "'></></div></td>"); 
     tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 
     tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>"); 
     tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>"); 

    $('table').append(tr); 
    } 
    }); 

} 

get_data(); 
setInterval(get_data,60000) 
}); 

感謝します。

Answer 1

あなただけのよう.html()を使用して、新しいデータを追加する前にテーブルを空にする必要があります。

$('table').html(); 

for (var i = 0; i < json.length; i++) { 
    // console.log(json[i].ClientImageName); 

     tr = $('<tr/>'); 
     tr.css("border-bottom","2px solid #FFF"); 
     tr.append("<td width='15%'><div class='clientimage'><img src='../../../../conf_images/boards/" + json[i].ClientImageName + "'></></div></td>"); 
     tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 

    $('table').append(tr); 
    } 

注：のように見えますのコードの中に

$('table').html(""); 

はまたcache: false,を削除することは何もしていますあなたの機能の中で行うこと。

これが役に立ちます。 screnn結果に表示されるデータは、$（ 'テーブル'）を使用して変更されていませんを見てみると

$(document).ready(function() { 
 

 
    function get_data() { 
 
    var tr ; 
 
    var time = new Date(); 
 
    
 
    $('table').html(""); 
 
    
 
    for (var i = 0; i < 3; i++) { 
 
     tr = $('<tr/>'); 
 
     tr.css("border-bottom","2px solid #FFF"); 
 
     tr.append("<td width='33%'><div class='clientname-text'>"+time+"</div></td>"); 
 

 
    $('table').append(tr); 
 
    } 
 

 
    } 
 

 
    get_data(); 
 
    setInterval(get_data,1000) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table></table>