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中position()方法用法实例
Jan 16 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
Bootstrap FileInput实现图片上传功能
Jan 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
JS中FormData类实现文件上传
2020/03/27 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
简单了解Python中的几种函数
2017/11/03 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
争论的故事教学反思
2014/02/06 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
小学教研工作总结2015
2015/05/13 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js