Таблица tbody не правильно добавляется

Question

Моя таблица не отображает правильные данные после запроса AJAX GET.Ну, на самом деле, после второй итерации цикла 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 s к table, а не к tbody.

Предлагаемые изменения гарантируют, что tbody останется в наличии и что tr будут добавлены как дочерние элементы к нему, а не вне его.