JQuery动态给LayUI table赋值

本文介绍了一种使用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保持一致。

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

### 如何在 Layui 表格中设置单元格的值 为了实现在 Layui 的 `table` 组件中动态修改特定单元格的内容,可以利用 JavaScript 来操作表格的数据源并触发重新渲染。具体方法如下: #### 方法一:更新缓存数据并通过重载刷新视图 当需要更改某个具体的单元格内容时,可以通过访问 `layui.table.cache[tableId]` 获取当前显示的所有行对应的原始 JSON 数据数组[^2]。 假设要改变某一行某一列的具体数值,则先定位到目标位置再做相应调整。之后调用 `table.reload()` 函数来强制组件依据最新的数据集重新绘制整个表格结构,从而达到视觉上的即时反馈效果。 ```javascript // 假设 tableId 是你的表格 ID var Data = layui.table.cache['yourTableId']; // 修改指定索引处的数据项(这里假定是从0开始计数) Data[someIndex]['someField'] = newValue; // 调用 reload 进行页面刷新 layui.table.reload('yourTableId', { data: Data, }); ``` 这种方法适用于批量编辑场景或是希望保持原有分页状态的情况下应用变更。 #### 方法二:直接操纵 DOM 结构 如果仅需针对单个或少数几个特殊案例执行快速修正而不影响其他部分的表现形式的话,也可以考虑采用 jQuery 或者原生 JS 对应的方式去查找对应 `<td>` 元素节点进而替换其内部 HTML 文本片段。 不过需要注意的是这种方式不会同步至后台数据库层面以及前端框架维护的状态机之中,因此建议谨慎选用此方案除非确实没有必要保存这些临时改动。 ```html <!-- 示例HTML --> <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> {{# if(d.city === '北京'){ }} <button class="layui-btn layui-btn-xs">查看</button> {{# } }} </script> <script> // ... 初始化表格代码 ... // 使用纯JS方式找到并修改第一个城市的名称为'上海' document.querySelector('#demo tr:first-child td[data-field="city"]').innerText='上海'; </script> ``` 以上两种途径均可满足不同业务逻辑下的需求,在实际开发过程中可根据具体情况灵活选取最合适的解决方案[^1]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值