•問題描述：想實現點擊按鈕在表格添加一行的功能，但發現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);

最后即可實現點擊按鈕新增一條數據的效果。

總結

以上所述是小編給大家介紹的layui點擊按鈕給table添加一行，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！