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

 更新时间:2018年08月10日 08:46:34   作者:sj0613xz  
想实现点击按钮在表格添加一行的功能,但发现layui并未集成该工具栏,因此,需要自己手动添加这个功能;这篇文章主要介绍了layui点击按钮给table添加一行,需要的朋友可以参考下

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

相关文章

  • js活用事件触发对象动作

    js活用事件触发对象动作

    现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.
    2008-08-08
  • 微信小程序实现滑动操作代码

    微信小程序实现滑动操作代码

    这篇文章主要介绍了微信小程序实现滑动操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • javascript监听鼠标滚轮事件浅析

    javascript监听鼠标滚轮事件浅析

    这篇文章主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
    2014-06-06
  • Leaflet 数据可视化实现地图下钻示例详解

    Leaflet 数据可视化实现地图下钻示例详解

    这篇文章主要为大家介绍了Leaflet数据可视化实现地图下钻示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JS前端攻坚Eventbus实现更新示例详解

    JS前端攻坚Eventbus实现更新示例详解

    这篇文章主要为大家介绍了JS前端攻坚Eventbus实现更新示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Javascript 正则表达式校验数字的简单实例

    Javascript 正则表达式校验数字的简单实例

    下面小编就为大家带来一篇Javascript 正则表达式校验数字的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 使用bootstrap插件实现模态框效果

    使用bootstrap插件实现模态框效果

    今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用,需要的朋友可以参考下
    2017-05-05
  • ng-options和ng-checked在表单中的高级运用(推荐)

    ng-options和ng-checked在表单中的高级运用(推荐)

    AngularJS是当前非常的流行的前端框架,它的语法糖非常多,也极大的方便了前端开发者。这篇文章主要介绍了ng-options和ng-checked在表单中的高级运用,需要的朋友可以参考下
    2017-01-01
  • JS Select下拉框(支持输入模糊查询)

    JS Select下拉框(支持输入模糊查询)

    这篇文章主要为大家详细介绍了JS Select下拉框的相关资料,支持输入模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 图片自动更新(说明)

    图片自动更新(说明)

    图片自动更新(说明)...
    2006-10-10

最新评论