如何實作layui點選按鈕為table新增一行（手動新增）

這篇文章帶給大家的內容是關於如何實現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:&#39;/demo/table/user/&#39;, page:true, id:&#39;tableInfo&#39;}" lay-filter="test">			  	<thead>				    <tr>				      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>				      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>				      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>				      <th lay-data="{field:&#39;city&#39;}">城市</th>				      <th lay-data="{field:&#39;sign&#39;}">签名</th>				      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>				      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>				      <th lay-data="{field:&#39;classify&#39;}">职业</th>				      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>				    </tr>				  </thead>				</table>

而我用的是這樣的方式：

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

關於列名的定義是寫在table.render({}）方法中的

解決方案：將table改寫成靜態的方式即可，即第二部分代碼

此時出現新問題：每點擊一次會出現兩個數據，應做如下修改：

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

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

相關推薦：

JQuery實作動態表格點擊按鈕表格增加一行_jquery

#

以上是如何實作layui點選按鈕為table新增一行（手動新增）的詳細內容。更多資訊請關注PHP中文網其他相關文章！