在每次Json調用後用Json結果覆蓋表格

Question

我在尋求有關較高級問題的幫助。我有一個腳本調用另一個以Json格式返回數據的腳本。

當前腳本填充使用JQuery動態創建的html表。我遇到的問題是，當再次調用新的/新的數據時，表中的數據沒有被更新/刷新。有人指出，數據沒有得到更新，因爲腳本使用'append'，我應該使用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(""); 

裏面的代碼會看起來像：

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

注：同時刪除cache: false,它沒有任何關係在你的功能做。

希望這會有所幫助。 。

$(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>