欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何实现layui点击按钮给table添加一行(手动添加)

程序员文章站 2022-06-07 22:38:36
...
本篇文章给大家带来的内容是关于如何实现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);

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

相关推荐:

JQuery实现动态表格点击按钮表格增加一行_jquery

以上就是如何实现layui点击按钮给table添加一行(手动添加)的详细内容,更多请关注其它相关文章!

相关标签: layui