layui 双击，单击表格数据选中颜色标记选中行

最新推荐文章于 2024-08-04 10:25:33 发布

Aimyone

最新推荐文章于 2024-08-04 10:25:33 发布

阅读量1.4k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/109115570

版权

layui 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

展示图

在这里插入图片描述
点击数据，标记

代码

操作的表格

    <div class="fp-table" style="width: 100%">
        <table id="hstable" lay-filter="hstool"></table>
    </div>


    layui.use(['form','table'], function() {
    
    //双击标记
        layui.table.on('rowDouble(hstool)', function(obj){  // 双击选中表格的数据，并标识
            // console.log(obj.tr) // 得到当前行元素对象
            // console.log(obj.data)
            // 添加当前行样式，然后移除兄弟样式
            // obj.tr.addClass('layui-bg-blue').siblings().removeClass('layui-bg-blue');
            obj.tr.addClass('layui-bg-orange').siblings().removeClass('layui-bg-orange');
        });

    })

//siblings()用于查找当前元素的同胞元素，就是拿到当前元素的兄弟节点(不包括自己)。
//给当前元素设置新的样式，并删除当前元素的同胞元素的样式：



或者


function fapztable(data) {
        //templet
        var table = layui.table;
        //第2个实例
        table.render({
            elem: '#hstable',
            height: h-60,
            /*width:w*0.45,*/
            size: 'sm', //小尺寸的表格
            page: false, //开启分页
            limits: [15, 30, 50,100,200,500,5000,10000,20000,50000],
            limit:20000,
            cols: [],
            data: data? data : [],
            filter:{
                bottom:false
            },
            done: function () {
                layui.soulTable.render(this)
            /*    $("[data-field='id']").css('display','none');*/

            }
        });
        //监听工具条
        table.on('tool(hstool)', function (obj) {
            var row = obj.data;
        });

//单击标记
        table.on('row(hstool)', function(obj){
            obj.tr.addClass('layui-bg-orange').siblings().removeClass('layui-bg-orange');
            var row = obj.data;
            selid=row.id?row.id:row.ID;
        })
    }