Layui 数据表格单击行选中当前行复选框并改变背景色_layui中function getlist()是啥意思-CSDN博客

本文链接：https://blog.csdn.net/XTY15037533925/article/details/107949746

本文介绍了三种方法在Layui数据表格中实现单击行选中对应的复选框并改变背景色。第一种方法通过监听行单击事件实现；第二种方法直接修改复选框状态和背景；第三种方法则是单击行选中checkbox，但作者不推荐。每种方法都提供了相应的CSS和JS代码示例，并展示了效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui 数据表格单击行选中当前行复选框并改变其背景色

第一种：行单机监听（推荐）
css：

<style type="text/css">
        .layui-table-click {
             background-color:cadetblue !important;
              color:white;
        }
    </style>

js：

 getlist: function () {
            var height = $("#tablist").height();
            table.render({
                elem: '#test'
                , url: '/Product/Part_ProductList'
                , id: 'scoollisttable'
                , page: true     //开启分页
                , method: 'post'
                , height: height
                , fitColumns: true    //表格自动适应屏幕
                , even: true         //隔行背景是否显示
                , limits: [10, 20, 50, 100, 200, 500] //显示分页的条数
                , limit: 10        //默认显示条数
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , cols: [[      //表头
                    { type: 'checkbox', sort: true, fixed: 'left' }
                    , { field: 'numbers', width: 50, title: '序号', type: 'numbers' }//序号列
                    , { field: 'ProductId', width: 110, title: '产品编号', sort: true }
                    , { field: 'ProductName', width: 110, title: '产品名称' }
                    , { field: 'ProductPrice', width: 110, title: '产品价格', sort: true }
                    , { field: 'ProductUnit', width: 80, title: '单位' }
                    , { field: 'ProductTypeName', width: 135, title: '产品类别名称' }
                    , { field: 'ProductWeight', width: 80, title: '重量', sort: true }
                    , { field: 'ProductSpec', width: 110, title: '产品规格' }