真正在当前行下方动态插入一行必须走原生DOM操作：绑定tool事件→获取obj.tr→用$(obj.tr).after()插入tr→td数量与th一致→手动初始化表单控件并同步table.cache以支持排序搜索导出。
点击操作列触发行内插入的 DOM 逻辑怎么写
直接在 toolbar 或 event 回调里用 layui.table.cache 手动改数据再 table.reload()，会导致整页重绘、当前页码重置、滚动位置丢失——这不是“在当前行下方插入”，而是“刷新后看起来像插入”。真正在当前行下动态加一行，必须绕过 table.render() 的自动渲染，走原生 dom 操作。
核心思路：给操作列绑定事件 → 获取当前行 DOM 节点 → 插入新 <tr> → 手动填充单元格内容 → 给新行加唯一标识（比如 data-inserted="true"）避免被后续 reload 清掉。
- 操作列模板里必须带
lay-event，例如：{field:'opt', title:'操作', toolbar:'#optTpl'}，script#optTpl中写<a lay-event="insert-row">插入</a> - 监听事件时用
table.on('tool(table-filter)', ...)，别用click原生事件，否则拿不到tr上下文 - 通过
$(obj.tr).after(...)插入，不是append到tbody末尾 - 新行的
td数量必须和表头th数量一致，否则错位；空单元格填
插入行后如何保持表格样式和交互一致性
Layui 表格的奇偶行色、hover 效果、边框都是靠 CSS 类（如 layui-table-hover、layui-table-striped）控制的。手动插入的 <tr> 默认没这些类，会显得突兀。
- 复制当前行的 class：用
$(obj.tr).attr('class')取值，设给新tr；如果当前行有layui-table-hover，记得插入后立即移除，避免 hover 状态残留 - 单元格内控件（如
input、select）要手动初始化：插入后调用form.render('select')或form.render('checkbox')，否则下拉框不生效 - 如果表格启用了
height自动高度，插入多行后可能撑出滚动条，但tbody高度不会自适应——得手动触发layui.table.resize()（Layui 2.8+）或重设tbodymax-height
如何让插入的行参与排序、搜索和导出
手动插入的 DOM 行默认不在 table.cache 数据中，所以点击列头排序、输入关键词搜索、点击导出按钮时，它都会被忽略。
想让它参与，就得同步更新缓存数据：找到对应 id 的 table 实例，读取 table.cache["your-id"]，用 splice 在指定索引后插入新数据对象，再调用 table.reload() ——但这样又回到整表重绘的问题。
- 折中方案：只对插入行做「伪参与」——排序时用
done回调遍历所有tr[data-index]，把插入行的data-index改成对应位置，视觉上对齐；搜索则用table.on('search')手动过滤并show/hide插入行 - 导出时，
table.exportFile()不会包含手动插入行，必须自己拼 CSV 字符串，用table.config.cols拿表头字段名，遍历tbody tr提取td文本 - 如果插入行需要提交到后端，别依赖
form.serialize()，它扫不到动态插入的input；改用$("#your-table").find("tr[data-inserted]").find("input,select").serializeArray()
为什么不能直接用 table.addRow() 或类似 API
Layui 官方没有 addRow() 方法，社区封装的插件大多基于 reload + 缓存修改，本质还是整表刷新。官方 table.cache 是只读映射，直接 push 不生效；table.getData() 返回的是副本，改了也不影响视图。
真正可靠的路径只有两条：一是接受整表 reload 带来的体验损失（适合插入频率低、数据量小的场景）；二是 DOM 层面硬插 + 后续状态补全（适合高频编辑、需保留滚动/焦点的场景）。选哪条，取决于你用户点「插入」按钮时，是更在意「立刻看到新行」，还是「新行能跟着排序搜索走」。
多数情况下，DOM 插入 + 手动维护缓存 + 导出前合并数据，是平衡开发成本和用户体验的实际解法。别指望一个方法调用就搞定所有事，Layui 的表格设计本就偏向静态展示，动态行是硬需求，就得硬处理。
