layui 動態添加 表格數據

靜態表格：

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

效果：