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添加一行，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Layui数据表格之获取表格中所有的数据方法

    数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

  • layui实现根据table数据判断按钮显示情况的方法

    就可以根据table的数据实现判断toolbar按钮的显示状态和情况 实例如下所示: <script type="text/html" id="barDemo"> {{# if(d.status ==0){ }} <a class="layui-btn layui-btn-mini" lay-event="examine">查看</a> <a class="layui-btn

  • layui实现数据表格点击搜索功能

    layui实现数据表格点击搜索功能

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href=&q

  • layui table 表格模板按钮的实例代码

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png" rel="external nofollow" > <title

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

    •问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能: •原先我写的table是这样实现的: $("#addTable").click(function(){ var tr=" <tr>"+ " <td>11</td>"+ " <td>22</td>"+ " <td>33</td

  • 关于layui 实现点击按钮添加一行(方法渲染创建的table)

    目标:layui 实现点击按钮添加一行 解决方案: 方案1.table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签: 方案2.table 是用方法渲染的方式创建的,写一个button,每次点击按钮,加载数据时添加一个Object; 之前我试过用方案1 来实现该功能,发现这个方案,代码量极大,最困难的地方就是在<tr>中加样式,特别是table中有很多种控件时,样式的添加非常麻烦 ,可参见点击打开链接 后选择使用方案2 ,但是遇到了,添加

  • 使用jquery给指定的table动态添加一行、删除一行

    使用jquery给指定的table动态添加一行、删除一行

    需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

  • layui点击按钮添加可编辑的一行方法

    昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑. 然而,发现添加了edit:'text'以后也不可以进行单元格编辑,而原本已有的数据可以,因此通过浏览器调试看了原有数据的样式,如图所示: 因此,将点击按钮添加一行<tr>标签的方法,修改为如下: $("#addTable").click(function(){ var tr=" <tr>"+ " <td data-field='domainId' data-ed

  • Repeater中添加按钮实现点击按钮获取某一行数据的方法

    Repeater中添加按钮实现点击按钮获取某一行数据的方法

    本文以一个asp.net程序为例讲述了Repeater中添加按钮实现点击按钮获取某一行数据的方法,分享给大家供大家参考借鉴之用.具体步骤如下: 1.添加编辑按钮和删除按钮 具体代码如下: <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="

  • Jquery实现点击按钮,连续地向textarea中添加值的实例代码

    Jquery实现点击按钮,连续地向textarea中添加值的实例代码

    代码如下: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=gbk"    pageEncoding="gbk"%>    <%@ include file="/pages/common/taglibs.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0

  • layui点击按钮页面会自动刷新的解决方案

    问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" rel="external no

  • vue.js 实现点击按钮动态添加li的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="

  • java实现table添加右键点击事件监听操作示例

    本文实例讲述了java实现table添加右键点击事件监听操作.分享给大家供大家参考,具体如下: 表格监听步骤 1 给表格 添加监听addMouseListener 2 使用MouseAdapter类的mouseClicked方法 3 通过MouseEvent类对象的getbutton方法来判断鼠标操作 BUTTON1 为左键  BUTTON3 为右键 import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; imp

随机推荐