How to implement layui to click a button to add a row to the table (manually added)

The content of this article is about how to implement layui to click the button to add a row to the table (manually add). It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

Problem description: I want to implement the function of clicking a button to add a row to the table, but I found that layuii does not integrate the toolbar, so I need to add this function manually;

Originally I The written table is implemented like this:

$("#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);
				});

cannot achieve the effect of adding; after querying, it is found that this is based on the fact that the table is written in a static way, that is:

<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>

And I use this method:

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

The definition of column names is written in the table.render({}) method

Solution: Rewrite the table as static The method is enough, that is, the second part of the code

At this time, a new problem appears: two pieces of data will appear every time you click, and the following modifications should be made:

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

Finally, click the button to create a new The effect of adding a piece of data.

Related recommendations:

JQuery implements dynamic tables. Click the button table to add a row_jquery

The above is the detailed content of How to implement layui to click a button to add a row to the table (manually added). For more information, please follow other related articles on the PHP Chinese website!