静态表格:

    <table class="layui-table" id="table" lay-filter="table">
<thead>
<tr>
<td>价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="layui-input" class="layui-input" name="price"></td>
<td>
<a class="layui-btn layui-btn-xs add">添加</a>
<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>
</td>
</tr>
</tbody>
</table>

添加操作:

    //因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});
$('body').on('click', '.add', function() {
//你要添加的html
var html = '<tr>'+
'<td><input type="text" id="layui-input" class="layui-input" name="price"></td>'+
'<td>'+
'<a class="layui-btn layui-btn-xs add">添加</a>'+
'<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>'+
'</td>'+
'</tr>';
//添加到表格最后
$(html).appendTo($('#table tbody:last'));
form.render();
});

删除操作:

   $('body').on('click', '.del', function() {
if ($('#table tbody tr').length === ) {
layer.msg('只有一条不允许删除。', {
time :
});
} else {
//删除当前按钮所在的tr
$(this).closest('tr').remove();
}
});

效果:

layui 动态添加 表格数据的更多相关文章

  1. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  2. html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  3. JQuery动态添加表格,然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  4. javascript动态添加表格以及获取数据

    <script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...

  5. 记一次LayUI中Table动态添加列数据

    这次在开发中遇到,有列数不固定的情况.废话不多说,先上图,在上代码. 下面上JS代码 function SearchData() { var dYear = $("#DYear") ...

  6. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  7. js动态添加table 数据tr td

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码 ...

  8. Js 动态添加的数据,监听事件监听不到

    在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...

  9. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

随机推荐

  1. [python] Pythonic语法笔记

    Pythonic语法笔记 __new__ 在类实例化之前执行的,也就是在init之前执行,可以为这个类写操作.接受的参数不是self而是cls.只有在new方法里返回类才会执行init操作,需要返回父 ...

  2. NAACL 2019 字词表示学习分析

    NAACL 2019 表示学习分析 为要找出字.词.文档等实体表示学习相关的文章. word embedding 搜索关键词 word embedding Vector of Locally-Aggr ...

  3. JS数组方法的的返回值和是否改变该数组总结

    concat() 方法 concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 返回值 返回一个新的数组.该数组是通过把所有 arrayX 参数添 ...

  4. C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib,该怎么解决

    C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib如标题,在窗体中添加Windows Media Player 控件,当调 ...

  5. PC、APP、H5三端测试的相同与不同

    随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?笔者总结如下: 首先谈一谈相同之处... 一,针对同一个系统功能的 ...

  6. Python学习之==>操作MySQL

    一.简介: MySQL为关系型数据库,其他关系型数据库包括Oracle.DB2.Sql Server等等.Python操作MySQL需要使用到pymsyql模块,pip安装即可. 二.操作MySQL步 ...

  7. mysql驱动表与被驱动表及join优化

    驱动表与被驱动表 先了解在join连接时哪个表是驱动表,哪个表是被驱动表:1.当使用left join时,左表是驱动表,右表是被驱动表2.当使用right join时,右表时驱动表,左表是驱动表3.当 ...

  8. 第四周总结 and 实验二

    课堂总结 一.课堂笔记总览     1.String类两种实例方法区别 String str1 = "hello";String str2 = "hello"; ...

  9. C++智能指针 原理、使用与实现

    目录 理解智能指针的原理 智能指针的使用 智能指针的设计和实现 1.智能指针的作用 C++程序设计中使用堆内存是非常频繁的操作,堆内存的申请和释放都由程序员自己管理.程序员自己管理堆内存可以提高了程序 ...

  10. 宏定义 #define CH_SENS(a,b) 0x##a##b

    #define Bin(n) LongToBin(0x##n##L) " ## ",属于宏定义中的字符(串)连接符,即,将符号两端的字符(串)接为一个整体,如以上代码中,在调用Bi ...