在每次 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("");

内部代码将如下所示：

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