html表格增加和删除一行,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、效果图如下：