ajax+jquery填写table表格_jquery for循环填充表格-CSDN博客

本文链接：https://blog.csdn.net/Rayvers/article/details/115655982

本文记录了一位开发者在使用Ajax和jQuery填充表格时遇到的问题与解决方案。通过for循环，动态创建并添加表格行。注意到tbody的加载顺序和append方法的使用细节，避免了数据错乱的问题。第一种循环方式正确地将数据逐行插入，而第二种方式导致了数据混乱。最终选择了更规范的写法来确保表格数据的正确展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax+jquery使用for循环填写table表格

今天写table遇到了一些问题，在这里记录一下，顺便做一下总结。
TBODY包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。
这段话出处：https://www.cnblogs.com/zhaoleigege/p/7697968.html
HTML代码：

<table class="sa_1" id="table" border="1" style="width: 100%">
	<thead id="thead">
 		<th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th>标题4</th>
        <th>标题5</th>
        <th>标题6</th>
        <th>标题7</th>
        <th>标题8</th>
	</thead>
    <tbody id="tbody">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>

    </tbody>
</table>

JS代码：

$.ajax({
        url:'xxx',
        dataType:'json',
        type:'post',
        data:{},
        success: function (res) {
            if (res.code === 200) {
                var records = res.data.records;
                console.log(res.data.records);
                if (records.length !== 0) {
                    //两种for循环显示效果一样
                    for (var i = 0; i < records.length; i++) {
                        var $tr = $("<tr>"+
                            "<td>"+records[i].a+"</td>"+
                            "<td>"+records[i].b+"</td>"+
                            "<td>"+records[i].c+"</td>"+
                            "<td>"+records[i].d+"</td>"+
                            "<td>"+records[i].e+"</td>"+
                            "<td>"+records[i].f+"</td>"+
                            "<td>"+records[i].g+"</td>"+
                            "<td>"+records[i].h+"</td>"+
                            "<td>"+records[i].i+"</td>"+
                            "</tr>");
                        var $table = $("#b");
                        $table.append($tr);
                    };
                    /*for (var i = 0; i < records.length; i++) {
                        $("#tbody").append("<tr> ");
                        $("#tbody").append("<td>" + records[i].studyListName + "</td>")
                        $("#tbody").append("<td>" + records[i].planProjectName + "</td>")
                        $("#tbody").append("<td>" + records[i].questionListName + "</td>")
                        $("#tbody").append("<td>" + records[i].innovationProjectName + "</td>")
                        $("#tbody").append("<td>" + records[i].orderListName + "</td>")
                        $("#tbody").append("<td>" + records[i].practicableOrderName + "</td>")
                        $("#tbody").append("<td>" + records[i].schedule + "</td>")
                        $("#tbody").append("<td>" + records[i].departmentName + "</td>")
                 
                        $("#tbody").append("</tr>");
                    }*/
                }
            } else {
                layer.res(res.data, {icon: 5});
            }
        }
    });

上面有两种循环方法，这两种循环方法看起来效果一样，但是代码的结果其实是不一样的。
究其原因还是append的锅。在写table的时候规范的写法应该把在td写在tr标签里面，但看我写的第二个循环，为什么for循环使用append方法的时候要加在tbody中呢？
这是因为append自带循环，当代码执行到append的时候会先遍历records[]数组。
如果加在tr中，代码在进入for循环后会先把records[i]从0到length填写在第一个tr中，接着从把1到length的records数组填写到第二个tr中。最终的结果就是类似于一张99乘法表。
那么为什么直接往tbody里添加就看起来没问题呢？
在这里插入图片描述
话不多说自己看，这只是看起来没问题，其实出大问题！td全在tr外面了！
最后我使用的办法第一个for循环，先用变量接收一组数据再用append进行添加。