layui实现点击按钮给table添加一行

网络编程 2021-07-04 16:46www.168986.cn编程入门

想实现点击按钮在表格添加一行的功能，但发现layui并未集成该工具栏，，需要自己手动添加这个功能；这篇文章主要介绍了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);

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

以上所述是长沙网络推广给大家介绍的layui点击按钮给table添加一行，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：bootstrap下拉框动态赋值方法下一篇：vuejs使用axios异步访问时用get和post的实例讲解

layui实现点击按钮给table添加一行

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

layui实现点击按钮给table添加一行

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设