AJAX GET请求后表格tbody数据显示异常：循环迭代重复旧数据

看起来你的问题出在DOM操作的方式不正确上——你移除了tbody元素后，直接将新的<tr>追加到table标签下，这会让浏览器自动为这些<tr>创建一个新的tbody，但这种方式容易导致DOM结构混乱，进而出现渲染异常。

修改后的代码： #

$.ajax({
    cache: false,
    type: 'GET',
    url: '@Url.Action("DisplayFiles","FileUploader")',
    dataType: "json",
    success: function(response) {
        // 清空tbody内的所有内容，而不是移除tbody本身
        $("#tblFiles tbody").empty();
        for (var i = 0; i < response.length; i++) {
            console.log(response[i]['Filename']);
            console.log(response[i]['FileFullPath']);
            // 将新行追加到tbody中，保持DOM结构的正确性
            $("#tblFiles tbody").append('<tr><td>' + response[i]['Filename'] + '</td><td>' + response[i]['FileFullPath'] + '</td><td></td></tr>');
        }
        console.log(response);
    },
    error: function(resp) {
        console.log('error');
    }
});

为什么原来的代码会出问题？ #

1. 你使用$("#tblFiles tbody").remove()完全移除了tbody元素，之后直接向table追加<tr>，浏览器会自动生成一个新的tbody来包裹这些<tr>
2. 后续的AJAX请求中，$("#tblFiles tbody").remove()会移除这个自动生成的tbody，但这个操作可能因为DOM渲染的延迟，导致旧的内容没有被彻底清除；或者多次操作后，DOM结构变得不稳定，浏览器渲染时出现异常
3. 保持tbody元素存在，只清空其内部内容，再向tbody追加新行，能确保DOM结构始终是标准的<table><thead>...</thead><tbody>...</tbody></table>，避免浏览器自动生成DOM带来的不可预期问题

另外，我在修改后的代码里给追加的行补了一个空列，和你原始表格的列数保持一致，避免表格布局错乱。

内容的提问来源于stack exchange，提问作者siobeh