layui tabular data check mark style

plan

Insert picture description here
The selected record line will be explicitly marked

Code

Operational table

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

js

 layui.config({
    
    
        base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
    
    
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        treeGrid:'treegrid/treeGrid',
        tableSelect:'tableSelect/tableSelect',
        excel:'excel/excel'
    });

    layui.use(['form','table','soulTable','laypage','layer','tree', 'util','tableSelect','excel'], 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()用于查找当前元素的同胞元素,就是拿到当前元素的兄弟节点(不包括自己)。
//给当前元素设置新的样式,并删除当前元素的同胞元素的样式:

Guess you like

Origin blog.csdn.net/qq_36636312/article/details/109115570