JQuery动态给LayUI table赋值

最新推荐文章于 2024-04-13 15:49:11 发布

原创最新推荐文章于 2024-04-13 15:49:11 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

自己总结专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery遍历后台返回的数据，并将其动态填充到HTML表格的方法。通过将数据转换为表格行，实现了数据的直观展示。注意，数据格式需为键值对集合，键需与td的id相匹配。

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

以下为html代码：
在这里插入图片描述
效果如下所示：

区域

报告数

var tableData = data.rows; //回调函数获取后台返回的表格数据

        $.each(tableData, function (i, n) {  //回显到表格
            var row = $("#template").clone();
            row.find("#name").text(n.name);
            row.find("#value").text(n.value);
            row.appendTo("#hot_table");//添加到模板的容器中
        });

注意：tableData参数的数据格式为[{“td的id”，value}，{“td的id”，value}]，即键值对的集合或数组，其中key要与td的id保持一致。

以下是效果图：
表格的样式请自行调整