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


Posted in Javascript onAugust 10, 2018

•问题描述:想实现点击按钮在表格添加一行的功能,但发现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添加一行,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
用js实现放大镜效果
Oct 28 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 #Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 #Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 #Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 #Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 #Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 #Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 #Javascript
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
学习ExtJS form布局
2009/10/08 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
python打开网页和暂停实例
2014/09/30 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
学习python需要有编程基础吗
2020/06/02 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
JSF界面控制层技术
2013/06/17 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
车间组长岗位职责
2013/12/20 职场文书
初中物理教学反思
2014/01/14 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
教师自我反思材料
2014/02/14 职场文书
客服专员岗位职责
2014/02/28 职场文书
生物学专业求职信
2014/07/23 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
外出考察学习心得体会
2016/01/18 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis