новые данные из более позднего времени, чтобы заменить текущий в 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:20 утра -----

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

- данные в 10:30 утра -----

+-------+-------+
|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, поскольку вы ищите идентификатор (который сам по себе довольно быстрый).

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