表正文未正确附加

Question

AJAX GET请求后，我的表tbody无法显示正确的数据。 好吧，实际上，在我的for循环的第二次迭代之后，它可以正确显示，但是在第三次迭代之后，依此类推，它会追加但显示前一项。

它显示了什么：

我不知道为什么控制台日志中的表显示不正确，数据显示正确。

$.ajax({
  cache: false,
  type: 'GET',
  url: '@Url.Action("DisplayFiles","FileUploader")', //url, // '/Account/Delete/',        
  dataType: "json",
  success: function(response) {
    $("#tblFiles tbody").remove();

    for (var i = 0; i < response.length; i++) {
      console.log(response[i]['Filename']);
      console.log(response[i]['FileFullPath']);

      $("#tblFiles").append('<tr><td>' + response[i]['Filename'] + '</td><td>' + response[i]['FileFullPath'] + '</td></tr>');

      //var tbodyFiles = "<tr><td> " + response[i]['Filename'] + "</td>" + "<td> " + response[i]['FileFullPath'] + "</td></tr>";
    }

    //$("#tblFiles").append(tbodyFiles);
    console.log(response);
  },
  error: function(resp) {
    console.log('error');
  }
});

<table class="table table-striped" id="tblFiles">
  <thead>
    <tr>
      <th>Filename</th>
      <th>File Fullpath</th>
      @*
      <th>Date Added</th>*@
      <th></th>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model) {
    <tr>
      <td>
        @Html.DisplayFor(modelItem => item.Filename)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.FileFullPath)
      </td>
      @*
      <td>
        @Html.DisplayFor(modelItem => item.DateAdded)
      </td>
      *@
      <td>
        @Html.ActionLink(" ", "Delete", new { id = item.Id }, new { @class = "btn-xs btn btn-danger glyphicon glyphicon-trash" })
      </td>
    </tr>
    }
  </tbody>
</table>

Answer 1

更改此：

$("#tblFiles tbody").remove();

对此：

$("#tblFiles tbody tr").remove();

然后更改此：

$("#tblFiles").append(...)

对此：

$('#tblFiles tbody").append(...)

说明：

您将删除整个tbody元素，但将tr而不是tbody附加到table 。

提议的更改将确保tbody保持存在，并且将tr s作为子级添加到它，而不是在其外部。