原 layui点击按钮给table添加一行
-
问题描述：想实现点击按钮在表格添加一行的功能，但发现layuii并未集成该工具栏，因此，需要自己手动添加这个功能； 原先我写的table是这样实现的： $("#addTable").click(function(){ var tr=" <tr>"+ " <td>11</td>"+ " <td>22</td>"+ " <td>33</td>"+ " <td>44</td>"+ " <td>55</td>"+ " </tr>"; $(".layui-table").append(tr); }); 并不能实现添加的效果；后查询后发现，这样做是基于table是用静态的方式编写的，即： <table class="layui-table" lay-data="{height:315, url:/demo/table/user/, page:true, id:tableInfo}" lay-filter="test"> <thead> <tr> <th lay-data="{field:id, width:80, sort: true}">ID</th> <th lay-data="{field:username, width:80}">用户名</th> <th lay-data="{field:sex, width:80, sort: true}">性别</th> <th lay-data="{field:city}">城市</th> <th lay-data="{field:sign}">签名</th> <th lay-data="{field:experience, sort: true}">积分</th> <th lay-data="{field:score, sort: true}">评分</th> <th lay-data="{field:classify}">职业</th> <th lay-data="{field:wealth, sort: true}">财富</th> </tr> </thead> </table> 而我用的是这样的方式： <table class="layui-hide" id="baseInfo" lay-filter="demo" lay-data="{height: full-200, cellMinWidth: 80, page: true, limit:30}"></table> 关于列名的定义是写在table.render({}）方法中的 解决方案：将table改写成静态的方式即可，即第二部分代码 此时出现新问题：每点击一次会出现两条数据，应做如下修改： $(".layui-table-body .layui-table").append(tr); 最后即可实现点击按钮新增一条数据的效果。
