侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

layui点击按钮给table添加一行

2022-06-01 星期三 / 0 评论 / 0 点赞 / 224 阅读 / 32519 字

问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能;原先我写的table是这样实现的:并不能实现添加的效果;后查询...

  • 问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能;

  • 原先我写的table是这样实现的:


    并不能实现添加的效果;后查询后发现,这样做是基于table是用静态的方式编写的,即:


    而我用的是这样的方式:

    <table class="layui-hide" id="baseInfo"  lay-filter="demo" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30}"></table>

    关于列名的定义是写在table.render({})方法中的

    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>..
    16. ..
      $("#addTable").click(function(){..
    17. ..
      var tr=" <tr>"+..
    18. ..
          "  <td>11</td>"+..
    19. ..
          "  <td>22</td>"+..
    20. ..
          "  <td>33</td>"+..
    21. ..
          "  <td>44</td>"+..
    22. ..
          "  <td>55</td>"+..
    23. ..
          "  </tr>";..
    24. ..
      $(".layui-table").append(tr);..
    25. ..
      });..
  • 解决方案:将table改写成静态的方式即可,即第二部分代码

  • 此时出现新问题:每点击一次会出现两条数据,应做如下修改:

    $(".layui-table-body .layui-table").append(tr);

    最后即可实现点击按钮新增一条数据的效果。


广告 广告

评论区