Layui表格单元格文字点击切换颜色必须用templet生成带onclick的HTML字符串，将状态存于data-属性或数据字段中，配合table.cache或updateCell实现持久化，cellStyle和rowStyle无法响应用户操作。
单元格文字点击切换颜色，必须用 templet + 事件代理
直接给 td 绑 click 无效——layui 表格重绘（分页、搜索、reload）后 dom 全换，事件丢失。必须把交互逻辑塞进列配置的 templet 函数里，生成带事件的 html 字符串。
templet 返回的内容会被当作纯 HTML 插入，所以你可以写 onclick，但要注意：不能调用未声明的函数，也不能依赖闭包变量（渲染时上下文已变）。
- 把状态存在
data-属性里，比如data-color="red"，点击时读取并切换 - 用内联
style控制颜色，避免 CSS 类被 layui 样式覆盖 - 别在 templet 里写
return '<span onclick="toggleColor(this)">xxx</span>'—— 全局函数不可靠，改用箭头函数或内联逻辑
示例（状态字段）：
{ field: 'status', title: '状态', templet: function(d) {
const color = d.status === 'active' ? '#5FB878' : d.status === 'inactive' ? '#FF5722' : '#999';
return '<span style="color:' + color + '; cursor:pointer;" onclick="this.style.color=this.style.color===\'#5FB878\'?\'#FF5722\':\'#5FB878\'">' + d.status + '</span>';
}}
想持久保存点击状态？得配合 table.cache 或外部变量
templet 每次渲染都重新执行，onclick 改的只是当前 DOM 节点样式，表格一刷新就回退。要真正“记住”颜色变化，必须把状态存到数据源里。
- 修改
d.status值本身（比如翻转布尔值），再调用table.reload()或table.updateCell() - 更轻量的做法：用
table.cache['yourFilter']找到对应行数据，原地改字段，然后调用table.render({ data: table.cache['yourFilter'] }) - 如果只是视觉标记（不改业务逻辑），可额外加个字段如
d._textColor，在 templet 里读它，点击时更新它
注意：table.updateCell() 只更新单个单元格内容，不会触发重绘，但也不会自动更新 templet 里的内联样式——你得在 templet 里显式读 d._textColor。
为什么不用 cellStyle 或 rowStyle？
cellStyle 是只读计算函数，返回样式对象，不响应用户操作；rowStyle 同理，且只在渲染时执行一次。它们没法监听点击，也不能修改数据状态。
你搜到的 “layui cellStyle 点击变色” 多数是混淆了概念：有人把 cellStyle 当成 DOM 操作入口，结果发现点完没反应——因为那根本不是事件处理机制。
- cellStyle 接收
params对象，其中params.cellData是原始值，无法感知点击 - rowStyle 的参数
row和index也是只读快照，改了也不影响后续渲染 - 真要动态响应，唯一可靠路径就是 templet + 数据层联动
移动端点击无反馈？补两行 CSS 就行
部分安卓 WebView 或 iOS Safari 下，span 点击没视觉反馈，甚至点不中。这不是 JS 问题，是 CSS 缺失。
- 给 templet 生成的元素加
style="cursor: pointer; -webkit-tap-highlight-color: transparent;" - 确保父级
td没设pointer-events: none（某些 skin 模式会偷偷加） - 如果用了
skin: "line"，它的边框可能遮挡点击热区，加padding: 0 4px扩展可点区域
最常漏的是 -webkit-tap-highlight-color —— 没它，iOS 点击后会闪一下灰色背景，干扰颜色切换的视觉连贯性。
