layui移除（删除）table表格的一行-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui移除（删除）table表格的一行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

表格里添加删除按钮：

         , {
             field: 'wealth', width: 150, title: '操作', align: 'center', fixed: 'right',
             templet: function (item) {
                 return '<a style="margin:0px 5px; color:red; cursor: pointer;" lay-event="delete" id="DeleteTr" >删除</a>';
             }
         }

添加 “delete”事件：

        //监听行工具事件
        table.on('tool(' + TableObj.tableId + ')', function (obj) {
            var data = obj.data;       
            //添加删除行
            if (obj.event === 'delete') {
                //alert('delete');
                layer.confirm('真的删除行么', function (index) {                  
                    var cacheData = layui.table.cache[TableObj.tableId];//获取缓存
                    obj.del();//①移除这一行
                    var rowIndex = obj.tr.attr("data-index"); //获取行索引
                    cacheData.splice(rowIndex, 1);  //②彻底移除元素，从缓存里移除这一行
                    layer.close(index);//关闭弹窗
                });
            }

        });

图例：

layui表格删除一行数据,layui,前端,javascript

说明：

layui的table，光用 obj.del(); 去移除一行虽然看上去这一行没了。

但是table的缓存还存在这被移除的行数据，还需要移除它的缓存内容，如下：文章来源地址https://www.toymoban.com/news/detail-719611.html

var cacheData = layui.table.cache[TableObj.tableId];//获取talbe的缓存
obj.del();//删除行
var rowIndex = obj.tr.attr("data-index"); //获取行索引
cacheData.splice(rowIndex, 1); //从缓存里删除行数据

到了这里，关于layui移除（删除）table表格的一行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！