layui点击按钮给表格table添加一行

layui点击按钮给表格table添加一行
  • 问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能;
  • 原先我写的table是这样实现的:
    		
    		
    1. $("#addTable").click(function(){
    2. var tr=" <tr>"+
    3. " <td>11</td>"+
    4. " <td>22</td>"+
    5. " <td>33</td>"+
    6. " <td>44</td>"+
    7. " <td>55</td>"+
    8. " </tr>";
    9. $(".layui-table").append(tr);
    10. });
    并不能实现添加的效果;后查询后发现,这样做是基于table是用静态的方式编写的,即:
    		
    		
    1. <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'tableInfo'}" lay-filter="test">
    2. <thead>
    3. <tr>
    4. <th lay-data="{field:'id', width:80, sort: true}">ID</th>
    5. <th lay-data="{field:'username', width:80}">用户名</th>
    6. <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
    7. <th lay-data="{field:'city'}">城市</th>
    8. <th lay-data="{field:'sign'}">签名</th>
    9. <th lay-data="{field:'experience', sort: true}">积分</th>
    10. <th lay-data="{field:'score', sort: true}">评分</th>
    11. <th lay-data="{field:'classify'}">职业</th>
    12. <th lay-data="{field:'wealth', sort: true}">财富</th>
    13. </tr>
    14. </thead>
    15. </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);
    最后即可实现点击按钮新增一条数据的效果。
2,847 ° 来自:PC 重庆市
上一篇: 面向对象VSMatlab Style
下一篇: [Python] 每天早上让树莓派叫你起床
您可能还喜欢这些:

亲,沙发正空着,还不快来抢?

评论审核未开启 记住我的个人信息 回复后邮件通知我
Back to Top