表正文未正确附加

时间:2019-05-30 15:58:27

标签: javascript jquery json ajax

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

这是显示的内容:

enter image description here

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

$.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>

1 个答案:

答案 0 :(得分:1)

更改此:

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

对此:

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

然后更改它:

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

对此:

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

说明:

您要删除整个tbody元素,而是将tr附加到table而不是tbody上。

建议的更改将确保tbody保持存在,并将tr作为子项添加到其中,而不是在其外部。