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 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
vue在线动态切换主题色方案
Mar 26 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
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
js实现日历的简单算法
2017/01/24 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
微信小程序实现留言板
2018/10/31 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python调用API实现智能回复机器人
2018/04/10 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python实现根据文件格式分类
2019/10/31 Python
Pytorch之保存读取模型实例
2019/12/30 Python
如何在Python对Excel进行读取
2020/06/04 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
物业管理计划书
2014/01/10 职场文书
农村党支部先进事迹
2014/01/14 职场文书
医院工作检讨书范文
2014/02/10 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
地陪导游欢迎词
2015/01/26 职场文书
谢师宴邀请函
2015/02/02 职场文书
任命书格式范文
2015/09/22 职场文书
安全生产标语口号
2015/12/26 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL