layui点击按钮给table添加一行
2018-01-03 17:58
686 查看
问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能;
原先我写的table是这样实现的:
解决方案:将table改写成静态的方式即可,即第二部分代码
此时出现新问题:每点击一次会出现两条数据,应做如下修改:
原先我写的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);最后即可实现点击按钮新增一条数据的效果。
相关文章推荐
- layui实现点击按钮给table添加一行
- layui 实现点击按钮添加一行(方法渲染创建的table)
- layui点击按钮添加可编辑的一行方法
- asp.net后台代码实现点击按钮动态添加table的一行
- layui点击按钮添加可编辑的一行
- jquery 实现点击 table中一行tr自动复制本行添加到本行之后 点击按钮回复到初始状态
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
- iOS 自定义UITableViewCell上添加UIButton按钮如何确定点击了哪一行,代码块实现
- 按钮触发table添加一行删除一行
- jquery实现点击按钮添加一行
- 在后台 如何实现 按钮点击后 Table能动态增加一行
- 点击按钮实现表格动态添加或删除一行
- tableView中添加按钮触发不了点击事件的解决办法
- JS :点击按钮table增加一行,删除一行
- 在后台 如何实现 按钮点击后 Table能动态增加一行
- iOS 自定义UITableViewCell上添加UIButton按钮如何确定点击了哪一行,代码块实现
- iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的问题
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- 在GridView 中点击某一个按钮在此按钮的下行动态添加一行,再次点击第二次添加的行隐藏
- 点击添加按钮,给gridview添加一行。