给Layui数据表格选中行增加自定义样式，看表格可以更轻松

蓝洛水深 • 2022年1月19日上午11:54 • 网站, 软件 • 3830 views

通过最新版的Layui文档可以看到，Layui本身提供了数据表格的单击、双击事件的监听，那么整体就简单很多。

文档的描述是这样的：

可以看到，通过如下方式，即可获取当前行：

table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});

table.on('row(test)', function(obj){

console.log(obj.tr) //得到当前行元素对象

console.log(obj.data) //得到当前行数据

//obj.del(); //删除当前行

//obj.update(fields) //修改当前行数据

});

如果要改变当前行的颜色，则这样写：

// 改变行样式 
      table.on('row(customerTable)', function(obj){
            $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
            console.log(obj.tr.selector) //得到当前点击的tr
            $(obj.tr.selector).attr({"style":"background:#00BBFF;color:#fff"});//改变当前tr颜色
     
        });

// 改变行样式

table.on('row(customerTable)', function(obj){

$(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样

console.log(obj.tr.selector) //得到当前点击的tr