Question

我正在寻求有关一个更早期问题的帮助。我有一个脚本调用另一个以Json格式返回数据的脚本。

当前脚本填充使用JQuery动态创建的html表。我遇到的问题是，当再次调用新/新数据时，表中的数据没有得到更新/刷新。有人指出，数据没有得到更新，因为脚本正在使用＆＃39;追加＆＃39;我应该使用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>

每次Json调用后用Json结果覆盖表

1 个答案: