稍后的新数据将替换 jQuery 中的当前数据

Question

$(document).ready(function(){
      setInterval(function(){
         $.ajax({ url: "getLiveData.php",
             success: function(result){
                 $.each(result, function(i, result){
                    var t = $("table#insideTable");
                    t.append('<tr><td>' + result.carNo + '</td><td>' +
                             result.carSpeed + '</td></tr>');
                    });
             }, 
             dataType: "json"
          });
      }, 600000);
});

你好，我试图使用上面的代码每 10 分钟更新一次车速。

--10:20AM的数据-----

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |170 kph|
+-------+-------+
|2      |150 kph|
+-------+-------+
|3      |190 kph|
+-------+-------+

--10:30AM的数据-----

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

但是，运行代码后，得到的结果是两个时间点都显示出来，一个接一个（见下文）。

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |170 kph|
+-------+-------+
|2      |150 kph|
+-------+-------+
|3      |190 kph|
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

我真正想要的是用稍后的新数据来替换当前的数据。

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

谁能帮助我吗？

非常感谢！

Answer 1

您想使用 .html() 函数代替 .append()：

更改：

success: function(result){
    $.each(result, function(i, result){
        var t = $("table#insideTable");
        t.append('<tr><td>' + result.carNo + '</td><td>' + result.carSpeed + '</td></tr>');
    });
}

到：

success: function(result){

    //create an output variable that will be added to the DOM when we're finished
    var output = '';

    //iterate through the results of the AJAX request
    $.each(result, function(i, result){

        //add a row to the output variable
        output += '<tr><td>' + result.carNo + '</td><td>' + result.carSpeed + '</td></tr>';
    });

    //add the output to the DOM, notice that since we are only adding nodes to the DOM once this creates less CPU overhead than appending each row separately (we also save overhead by not selecting the table element during each iteration of the $.each() loop)
    $("#insideTable").html(output);
}

这将替换表元素内的 HTML，而不是附加到它。以下是使用 .html() 与 .append() 的演示： http://jsfiddle.net/jasper/TKaVF/

这是 .html() 的文档：http://api.jquery.com/html

顺便说一句，添加 table 并不会让你的选择器更快，因为你正在寻找-up一个ID（这本身就相当快）。

var t = $("table#insideTable");

会更快：

var t = $("#insideTable");

Answer 2

工作示例： http://jsfiddle.net/manseuk/mnRTf/

将成功方法更改为：

$('#tablecontainerdiv').html('<table>');
$.each(result, function(i, result){
    $("#tablecontainerdiv table").append('<tr><td>' + result.carNo + '</td><td>' +
              result.carSpeed + '</td></tr>');
});
$('#tablecontainerdiv').append('</table>');

其中 tablecontainerdiv 是包含表格的 div，例如：

<div id="tablecontainerdiv">
  <table>
    //your data here
  </table>
</div>

新代码将用新数据替换旧表格

Answer 3

在添加新行之前清空表：

success: function(result){
             var t = $("table#insideTable"); // moved outside the loop
             t.empty();                      // remove contents of the element
             $.each(result, function(i, result){
                t.append('<tr><td>' + result.carNo + '</td><td>' +
                         result.carSpeed + '</td></tr>');
                });
         }