[英]Table tbody not correctly appending
My table tbody doesn't display the correct data after an AJAX GET request. AJAX GET请求后,我的表tbody无法显示正确的数据。 Well actually, after the second iteration of my for loop, it is showing correctly, but after the third iteration and so on, it is appending but it is showing the previous item.
好吧,实际上,在我的for循环的第二次迭代之后,它可以正确显示,但是在第三次迭代之后,依此类推,它会追加但显示前一项。
This is what it showing: 它显示了什么:
I don't know why it is showing incorrectly in the table in console log, the data is showing correctly. 我不知道为什么控制台日志中的表显示不正确,数据显示正确。
$.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>
Change this: 更改此:
$("#tblFiles tbody").remove();
to this: 对此:
$("#tblFiles tbody tr").remove();
and then change this: 然后更改此:
$("#tblFiles").append(...)
to this: 对此:
$('#tblFiles tbody").append(...)
Explanation: 说明:
You were removing the entire tbody
element, but appending the tr
s to the table
not the tbody
. 您将删除整个
tbody
元素,但将tr
而不是tbody
附加到table
。
The proposed changes will ensure that the tbody
stays present and that tr
s are added as children to it instead of outside of it. 提议的更改将确保
tbody
保持存在,并且将tr
s作为子级添加到它,而不是在其外部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.