javascript - 在 jQuery 表绑定(bind)中获取更多数据时，如何在表主体中保留旧数据？

Question

这是我的 HTML 表格

<table id="tblscroll">
  <thead>
    <tr>
      <th>Account Code</th>
      <th>Description</th>
      <th>Total Amount</th>
      <th>Amt1</th>
      <th>Amt2</th>
      <th>Amt3</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<img id="loader" src="Image/myLoading.gif" style="display: none" />

这是我的加载数据。首先我加载一些数据。滚动后，它会获取一些要绑定(bind)的数据，但我之前的替换为新数据。

$(document).ready(function() {
  GetRecords();
});

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    pageIndex++;
    if (pageIndex >= 2) {
      $("#loader").show();
      GetRecords();
    }

  }
});

comcod = <%=this.GetCompCode()%>;

function GetRecords() {
  $("#loader").show();
  $.ajax({
    type: "POST",
    url: "TestScrollDatat.aspx/Getdata",
    data: '{comcod: ' + comcod + ',pageindex:' + pageIndex + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
      alert(response.d);
    },
    error: function(response) {
      alert(response.d);
    }
  });
  //}
}

function OnSuccess(response) {
  //alert("Enter");
  var customer = JSON.parse(response.d);
  var row;
  $.each(customer,
    function(i, item) {

      row += "<tr>";
      row += "<td>" + item.actcode + "</td>";
      row += "<td>" + item.actdesc + "</td>";
      row += "<td>" + item.totamt + "</td>";
      row += "<td>" + item.amt01 + "</td>";
      row += "<td>" + item.amt02 + "</td>";
      row += "<td>" + item.amt03 + "</td>";
      row += "</tr>";
      $("#tblscroll tbody").html(row);
    });


  $("#loader").hide();
}

我想保留旧数据并与新数据绑定(bind)。

Answer 1

row += "<tr>";之后var row;结果 row === "undefined<tr>" 。不要附加到未初始化的变量。使用row = "<tr>";对于第一行。这也避免了在更新表后追加到同一变量。

接下来，使用 $("#tblscroll tbody").append(row); 而不是 .html .

您还可以缩短函数——不需要某些变量:

function OnSuccess(response) {
  //alert("Enter");
  const customer = JSON.parse(response.d),
    columns = [
      "actcode",
      "actdesc",
      "totamt",
      "amt01",
      "amt02",
      "amt03"
    ];

  $.each(customer, function(i, item) {
    console.log("<tr>" + $.map(columns, (prop) => "<td>" + item[prop] + "</td>").join("") + "</tr>");
  });
  $("#loader").hide();
}