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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 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
我的论坛源代码(二)
2006/10/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
关于vue面试题汇总
2018/03/20 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python os模块在系统管理中的应用
2020/06/22 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
python中数字是否为可变类型
2020/07/08 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
数控技校生自我鉴定
2014/04/19 职场文书
2014年终个人工作总结
2014/11/07 职场文书
升职自我推荐信范文
2015/03/25 职场文书
民事辩护词范文
2015/05/21 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
用JS创建一个录屏功能
2021/11/11 Javascript