layui點擊按鈕給table添加一行和刪除一行(批量刪除)

1、CSS代碼，用於table裏的下拉框不被遮擋

.layui-table-cell,.layui-table-box ,.layui-table-body{
    overflow: visible !important;
}
td .layui-form-select {
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
}

2、表格、按鈕、下拉菜單

<%--數據表格--%>
<table class="layui-hide" id="demo" lay-filter="demo"></table>

<%--按鈕--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe654;</i>添加
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon">&#xe640;</i>刪除
        </button>
    </div>
</script>

<%--下拉菜單--%>
<script type="text/html" id="selectState">
    <select name="state" lay-filter="state" data-value="{{d.state}}" ></select>
</script>

3、實現動態下拉、添加、刪除（批量刪除）

var statelist = {};//存儲碼錶數據，用於表格回調
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;
        //動態獲取碼錶數據
        $.ajax({
            type: "post",
            url: "state",
            dataType: "json",
            async: false,
            success: function (data) {
                statelist = data.list;
            }
        });

        //展示已知數據
        table.render({
            elem: '#demo'
            , title: '手動添加刪除行'
            , toolbar: '#toolbarDemo'//開啓頭部
            , cellMinWidth: 80 //全局定義常規單元格的最小寬度
            , cols: [[ //表頭
                {type: 'checkbox', fixed: 'left'}
                , {field: 'state', title: '狀態', width: 158, templet: '#selectState'}
                , {field: 'lsh', title: '流水號', edit: 'text', width: 158}
                , {field: 'name', title: '名稱', edit: 'text', width: 158}
            ]]
            //這裏就是一開始渲染就添加一個空的一行數據，或者添加一下數據也可以
            , data: [{state: "0", lsh: "", name: ""}, {state: "1", lsh: "", name: ""}]
            , done: function (res, curr, count) {
                //添加下拉菜單數據
                for (var k in lcztlist) {
                    $("select[name='state']").append('<option value="' + statelist[k].value + '">' + statelist[k].label + '</option>');
                }
                //根據已有的值回填下拉框
                layui.each($("select[name='state']"), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value'));
                });
                //渲染select
                form.render('select');
            }
        });
        //頭部工具欄事件
        table.on('toolbar(demo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data //獲取選中的數據
                , demo = table.cache["demo"];//獲取表格中的數據
            switch (obj.event) {
                case 'add':
                    //添加時的字段信息
                    var datas = {state: "1", lsh: "", name: ""};
                    //加入數組中
                    demo.push(datas);
                    //重載表格
                    table.reload('demo', {
                        data: demo
                    });
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.msg('請選中一行或多行數據');
                    } else {
                        var tablelist = [];//存儲未選中的數據
                        //循環表格數據
                        for (var i in demo) {
                            //判斷未選中數據
                            if (!demo[i].LAY_CHECKED) {
                                //存入數組
                                tablelist.push(demo[i]);
                            }
                        }
                        //重載表格
                        table.reload('demo', {
                            data: tablelist
                        });
                    }
                    break;
            }
        });
        //監聽下拉框改變
        form.on('select(lczt)', function (data) {
            var selectElem = $(data.elem);
            var tdElem = selectElem.closest("td");
            var trElem = tdElem.closest("tr");
            var tableView = trElem.closest(".layui-table-view");
            table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
        });
    });

 4、效果圖如下：