监听row(table)事件，用$(tr).after()插入含colspan的tr包裹div，并检查.next('tr.custom-detail-row')避免重复，用data属性管理展开状态，reload前需手动清理。
点击 Layui 表格某行时，如何动态插入一个 div 到该行下方？
直接用 Layui 的 on('row(table)') 事件监听点击，再通过 DOM 操作在目标 <tr> 后插入新 <code><tr>（里面包着你的 <code>div），这是最稳妥、兼容性最好的方式。Layui 表格渲染后是标准的 HTML 表格结构，不建议强行改写模板或 hack 渲染逻辑。
常见错误现象：layer.open() 或 $('#xxx').append() 直接插到 body 里，结果位置飘走；或者用 table.cache 找不到对应 DOM 节点；还有人试图在 cols 里加个空列放内容，结果响应式错乱、导出异常。
- 必须监听
row(table)，不是tool(table)或event - 拿到
tr元素后，用$(tr).after(...)插入新<tr><td colspan="N"><div>...</div></td></tr> -
colspan值要和你表格实际列数一致（可通过table.config.cols[0].length动态读取） - 插入的
div不要依赖 Layui 的内置样式类（如layui-table-view），容易被重置
如何确保插入的 div 和原表格样式协调、不破坏布局？
关键不是“美化”，而是“不打架”。Layui 表格有固定高度、边框、padding、字体大小，你插进去的 div 如果没显式设置，会继承父级 <td> 的样式，但往往 padding 过大、line-height 失控、甚至触发横向滚动条。
<ul><li>给插入的 <code><td> 加 <code>style="padding: 8px 15px;"，和 Layui 默认 td 一致
div 外层套一层 <div class="layui-table-cell"> 可复用部分内边距和对齐逻辑
<li>避免在插入内容里用 <code>layui-btn 等组件——按钮会触发新的事件绑定，可能和表格事件冲突form.render() 主动初始化，否则 select、checkbox 不生效多次点击同一行时，怎么避免重复插入多个 div？
这是最容易被忽略的坑：用户点一次展开，再点一次收起，而不是再展开一个。但默认逻辑下，每次 click 都执行 .after()，就会堆叠 N 个。
- 插入前先检查下一行是否已存在自定义
tr：if ($(tr).next('tr.custom-detail-row').length === 0) { ... } - 展开/收起状态建议用
data-属性标记：$(tr).data('detail-open', true)，比查 DOM 更快更可靠 - 收起操作不是
.remove()就完事——要同时清掉data-状态，否则下次点开逻辑错乱 - 如果表格启用了分页或重载（
table.reload()），所有动态插入的内容都会消失，这个行为是预期的，别试图持久化它
为什么不能用 table.on('created') 或修改 templet 实现？
因为 created 是一次性事件，只在初始渲染后触发；而 templet 是每行数据渲染时调用的函数，它生成的是静态 HTML，无法响应后续点击动作，也无法访问当前点击的 DOM 上下文。
-
templet里写onclick内联事件极难维护，且 Layui 会剥离部分属性 - 想靠 CSS
:has()或details/summary模拟——Layui 表格不支持这类现代伪类，兼容性崩盘 - 用
layer.tips()替代插入？位置计算不准，滚动时错位，且无法交互（比如放输入框） - 真要复杂交互，建议把详情内容抽成独立模块，点击后用
layer.open({type: 1, content: $('#detail-template').html()})弹窗，比塞进表格里干净得多
真正麻烦的不是插入那几行代码，而是状态管理、DOM 生命周期、以及 reload 后的清理。很多人卡在“第一次能动，刷新后就失效”——其实只是忘了在 reload 前手动 remove() 掉所有 .custom-detail-row。
