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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
js function定义函数使用心得
Apr 15 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
JS截取字符串实例详解
Nov 24 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 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 截取字符串专题集合
2010/08/19 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
详解axios在node.js中的post使用
2017/04/27 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python中按值来获取指定的键
2019/03/04 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
会计工作心得体会
2014/01/13 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
晚会主持词开场白
2014/03/17 职场文书
社团活动总结
2014/04/28 职场文书
共青团员自我评价
2015/03/10 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
vue修饰符.capture和.self的区别
2022/04/22 Vue.js