Layui table单元格渲染需确保templet返回合法HTML字符串并转义用户输入，包裹控件适配样式，事件须委托绑定。错误写法如返回DOM对象或未转义内容会导致空白、XSS或交互失灵。
默认情况下，layui table 会把单元格内容当作纯文本渲染，templet 返回的 html 字符串会被直接插入到 innerhtml 中——但前提是必须确保字符串合法、无 xss 风险，且不破坏表格盒模型。
templet 必须返回字符串，不能返回 DOM 或 jQuery 对象
常见错误是写成：templet: function(d) { return layui.$('<span>' + d.content + '</span>'); }——这会导致单元格空白或控制台报错。Layui 表格只接受字符串作为单元格内容，内部用 innerHTML 插入。
- 正确写法：拼出完整 HTML 字符串，如
templet: function(d) { return '<span class="tag">' + d.content + '</span>'; } - 外层用单引号，HTML 属性统一用双引号，避免嵌套冲突
- 若字段值含双引号（如
d.content === 'User "Admin"'），直接拼接会截断属性值，此时必须用layui.laytpl.escape(d.content)过滤
敏感内容必须转义，否则存在 XSS 风险
用户输入的内容（如评论、昵称、描述）如果未经处理就直接拼进 HTML，可能执行恶意脚本。Layui 不自动转义 templet 返回的内容。
- 推荐做法：对所有不可信字段调用
layui.laytpl.escape()，例如templet: function(d) { return '<div>' + layui.laytpl.escape(d.desc) + '</div>'; } - 不要依赖
{{d.xxx}}模板语法做安全过滤——它只是简单字符串替换，不做 HTML 转义 - 仅当字段确定为“可控内容”（如状态码、枚举名）时，才可跳过转义
HTML 元素需适配 Layui 单元格样式
直接塞 <input>、<select> 或带内联样式的标签，常出现高度塌陷、文字偏移、点击区域错位等问题，因为 Layui 单元格自带 padding 和 line-height。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 解决方案：包裹一层
<div class="layui-table-cell"></div>，保持默认垂直居中和对齐 - 对
input[type="range"]，额外加style="width:100%; margin:4px 0;"，否则拖动条被截断 - 禁用
user-select: none（Layui 默认启用），否则 range 拖拽失效，可在包裹层加style="-webkit-user-select:auto; user-select:auto;"
事件绑定必须用委托，不能写 onclick
在 templet 里写 onclick="doSomething()" 看似简单，但表格重载、分页、排序后 DOM 重建，内联事件会丢失；也无法访问当前行数据 d。
立即学习“前端免费学习笔记（深入）”；
- 正确方式：在
table.render的done回调中统一绑定委托事件，例如：layui.$(elem).on('click', 'td[data-field="content"] a', handler) - 通过
$(this).closest('tr').data('index')获取行索引，再查table.cache[<code>id][index]取原始数据 - 避免每行都单独绑定事件，防止内存泄漏和重复绑定
最易被忽略的是：HTML 解析本身没问题，但一旦涉及用户输入、交互控件或样式微调，就必须同时处理转义、盒模型、事件生命周期这三个层面——少一个，轻则显示异常，重则被注入或交互失灵。
