靜態表格：

<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() {//你要添加的htmlvar 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 === 1) {layer.msg('只有一條不允許刪除。', {time : 2000});} else {//刪除當前按鈕所在的tr$(this).closest('tr').remove();}});

效果：

?

轉載于:https://www.cnblogs.com/guangzhou11/p/11592566.html

總結

以上是生活随笔為你收集整理的layui 动态添加 表格数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。