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);
  最后即可实现点击按钮新增一条数据的效果。

更多免费技术资料可关注：annalin1203