必须用事件代理监听.layui-table-thead th，通过data-field匹配并高亮整列td，因分页/重载会重建DOM导致直接绑定失效；需在done回调中注册代理事件，统一处理主表与左右固定列，并加!important确保样式生效。
layui表格点击表头如何触发整列高亮
必须用事件代理监听 .layui-table-thead th，通过 data-field 匹配对应列的 td，再统一加高亮类；不能直接绑定 onclick 到 th 元素上，否则分页、重载后事件丢失。
为什么 click 事件绑在 th 上会失效
因为 layui 表格在分页、排序、table.reload() 时会重建整个 thead 和 tbody DOM，手动绑定的事件监听器不会自动挂载到新生成的 th 上。常见错误包括：
- 写
layui.$('th').on('click', ...)—— 只对初始渲染的th有效 - 在
render外层直接写document.querySelector('th').onclick = ...—— 同样只作用于首次 DOM - 没传
data-field或字段名大小写/下划线不一致，导致找不到对应列单元格
整列高亮的正确实现步骤
核心是：监听表头、提取 data-field、批量操作同列 td、样式加 !important 防被覆盖。
- 在
table.render()的done回调里注册事件代理：layui.$(tableElem).on('click', '.layui-table-thead th', function() { ... }) - 从点击的
th取$(this).data('field')，这是列唯一标识（对应cols中配置的field） - 遍历所有
td[data-field="xxx"]（含主表、固定左列.layui-table-fixed-l、固定右列.layui-table-fixed-r） - 统一加自定义类如
col-highlight，CSS 必须写成：.layui-table td.col-highlight { background-color: #e6f7ff !important; } - 每次点击前先清除所有已高亮的列：
layui.$('.layui-table td.col-highlight').removeClass('col-highlight')
容易被忽略的兼容性细节
固定列（fixed: 'left' 或 fixed: 'right'）是独立 DOM 结构，主表加了 col-highlight 不会自动同步过去。必须显式处理：
- 查主表：
layui.$('.layui-table-body td[data-field="' + field + '"]') - 查左固定列：
layui.$('.layui-table-fixed-l .layui-table-body td[data-field="' + field + '"]') - 查右固定列：
layui.$('.layui-table-fixed-r .layui-table-body td[data-field="' + field + '"]') - 如果用了
skin: 'line'，默认边框会盖住背景色，务必补border-color: transparent !important - 移动端需加
cursor: pointer到th，否则用户看不出可点
!important，这两处一错，高亮就看不见。 
