layui数据表格实现动态增加一行或删除一行

科学上网教程 | 机场推荐 | 云深不知处(机场)

实现代码及思路如下：

HTML代码

<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 tableWidget">
    <table id="dataTableEditTable" lay-filter="dataTableEditTable"></table>
</div>

JS代码

var blankRowData = {
    'dataItemNo': '', 'dataItemName': '', 'dataItemDescription': '', 'dataType': '', 'isKey': '',
    'isNullable': '', 'isForeignKey': '', 'dataElement': '', 'dataDict': ''
};
var tableData = [];
if (layui.cache.identified == 'dataTableEdit') {
    table.render({
        elem: '#dataTableEditTable',
        id: "dataTableEditTable",
        cellMinWidth: 95,
        toolbar: "#toolbar",
        defaultToolbar: [],
        height: "full-160",
        text: {none: "暂无数据"},
        page: false,
        cols: [
            [
                {
                    type: "checkbox",
                    fixed: 'left',
                    width: 40
                },
                {
                    field: 'dataItemNo',
                    title: '数据项编号',
                    width: 150,
                    align: 'center'
                },
                {
                    field: 'dataItemName',
                    title: '数据项名称',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataItemDescription',
                    title: '数据项描述',
                    align: 'center'
                },
                {
                    field: 'dataType',
                    title: '数据类型',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isKey',
                    title: '是否主键',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isNullable',
                    title: '是否可为空',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isForeignKey',
                    title: '是否外键',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataElement',
                    title: '数据元',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataDict',
                    title: '数据字典',
                    width: 100,
                    align: 'center'
                }
            ]
        ],
        data: tableData
    });
}


/*增加/删除一行点击事件*/
table.on("toolbar(dataTableEditTable)", function (e) {
    switch (e.event) {
        case "add":
            tableData.push(blankRowData);
            table.reload('dataTableEditTable', {
                data: tableData
            });
            break;
        case "del":
            tableData.splice(tableData.length -1 , 1);
            table.reload('dataTableEditTable', {
                data: tableData
            });
            break;
    }
});

实现思路

定义一个全局变量tableData保存表格数据，点击增加时，向tableData增加一条空白数据blankRowData，然后重新加载表格。