layui表格动态新增行

最新推荐文章于 2025-10-14 13:59:59 发布

原创最新推荐文章于 2025-10-14 13:59:59 发布 · 1.1w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#layui #java

java 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用layui库在表格中动态添加和删除行。通过定义表格和初始化设置，实现了点击按钮添加新行的功能。同时，监听工具条以实现删除行的操作。在删除行时，对表格数据进行了相应的处理，包括更新数据数组和重新加载表格。

在这里插入图片描述
当点击添加一行时动态添加一行：

首先定义表格：
<%-- 表格–%>

添加一行

然后就是 table初始化：
table.render({
elem: ‘#tabAddSell’,//table元素
id: ‘tabAddSell’,
page: false,
data:[],//这里赋初始值
cols: [[
{title: ‘序号’, width: 120,type:‘numbers’,totalRowText: ‘合计’},
{field: ‘id’, title: ‘id’, event: ‘id’, width: 120, hide: true},
{field: ‘right’, title: ‘操作’,width:80,align: ‘center’, templet: function(rowData){
return ‘移除’;}},
…
]],
});

//添加行
$("#addRow").on(“click”, function() {
tableActive.addNewRow();
});

//监听工具条，删除行
table.on(“tool(tabAddSell)”, function (obj) {
var data = obj.data,
event = obj.event,
tr = obj.tr; //获得当前行 tr 的DOM对象;
console.log(data);
switch(event){
case “del”:
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
tableActive.deleteRow();
break;
}}

//定义表格操作
var tableActive = {
//添加行
addNewRow: function() {
//获取表格当前数据
var newData = table.cache[“tabAddSell”];
//新行数据
var newRow= {
“Id”:Data.length,
… //给新行空数据
};
//将新行插入表格数据中
newData.push(newRow);

//使用新数据重载表格
table.reload(“tabAddSell”,{
data: newData
});
//删除行
deleteRow: function() {
discountAllMoney=0;
Data = table.cache[“tabAddSell”];
Data.splice(Data.length-1, 1);//删除最后一项空值
var boll=false;
for(var i=0, row; i < Data.length; i++){
row = Data[i];
//在table工具栏监听时删除对应行dom结构
//行不存在则从数据中删除
if(row.Id===undefined){
Data.splice(i,1);//删除一项
boll=true;
CommodityNameR.splice(i,1);
}
if (boll){
for (var v=i;v<Data.length;v++){
Data[i].Id=Data[i-1].Id+1;//给id重新排序
}
}
continue;
}
table.reload(“tabAddSell”,{
data : Data
});

}