Question

我试图用jQuery中的内容创建一个动态表。此外，我已启用setTimeout，以便在html页面中刷新和更新数据。

$(document).ready(function update_data() {
  $.ajax({
    dataType: "json",
    url: "/wirelessSensor/dag",
    success: updateForData,
    error: errorOnAjax
  });

  setTimeout(function() {
    update_data();
  }, 5000);

});

function updateForData(data) {
  // Updates DAG
  console.log("Wirless nodes details");
  var hasData = true;

  if (data.result && data.result && data.result == "none") {
    console.log('No data in result');
    hasData = false;
  } else if (!data.devices || !data.status) {
    console.log('Devices not found in result');
    hasData = false;
  }

  if (hasData) {

    console.log('Creating Table');

    var trHTML = '';
    $.each(data.devices, function(index) {

      trHTML += "<tr><td>" + data.devices[index] + "</td><td>" + data.lifetime[index] + "</td><td>" + data.status[index] + "</td></tr>";
    });

    $("#location").append(trHTML);
  }
}


function errorOnAjax(jqxhr, status, errorstr) {
  var errText = (errorstr == null) ?
    '' : ', error: ' + errorstr;
  console.log('Ajax error: ' + status + errText);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="location" border='1' width='100%'>
  <tr>
    <th align='center'> Devices </th>
    <th align='center'> Lifetime </th>
    <th align='center'> Status </th>
  </tr>
</table>

这里因为使用setTimeout我的动态表正在重复。已经存在的条目已重复。我怎么能避免这个？

Answer 1

您可以重新构建HTML以包含<thead>和<tbody>元素，并将<tbody>的内容设置为结果（而不是将结果附加到可能已存在的条目中）。

<table id="location" border='1' width='100%'>
  <thead>
    <tr>
      <th align='center'> Devices </th>
      <th align='center'> Lifetime </th>
      <th align='center'> Status </th>
    </tr>
  </thead>
  <tbody id="location-content"></tbody>
</table>

然后执行$("#location-content").html(trHTML);（注意：html而不是append，以销毁旧结果而不是保留它们。

用于动态表创建的jquery中的Settimeout

1 个答案: