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、表格、按钮、下拉菜单

<%--数据表格--%>


<%--按钮--%>


<%--下拉菜单--%>

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('' + statelist[k].label + '');
                }
                //根据已有的值回填下拉框
                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、效果图如下：