靜態(tài)表格:
<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>
//因為動態(tài)添加的元素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 === 1) {
? ? ? ? layer.msg('只有一條不允許刪除江咳。', {
? ? ? ? ? ? time : 2000
? ? ? ? });
? ? } else {
? ? ? ? //刪除當(dāng)前按鈕所在的tr
? ? ? ? $(this).closest('tr').remove();
? ? }
? });