直接用layui.table.on('tool')无法原地编辑单元格，因其仅监听工具栏按钮，不提供单元格DOM定位与编辑上下文；需改用cellClick事件动态插入input并聚焦，配合blur/Enter保存、样式修复及缓存更新实现完整编辑流程。
为什么直接用 layui.table.on('tool') 无法原地编辑单元格
因为 tool 事件监听的是工具栏按钮（如“编辑”“删除”），它不提供单元格 DOM 定位和原生编辑上下文。表格渲染后，单元格内容是纯文本节点，没有输入框结构，点击后需手动插入 <input> 并聚焦——这得靠 cellClick 事件 + 动态 DOM 操作实现。
如何用 table.on('cellClick') 触发原地编辑
这是最直接的入口：监听任意单元格点击，判断是否允许编辑（比如排除操作列、表头），再替换当前单元格 HTML 为输入框。
- 必须在
table.render()后注册，且确保id与监听目标一致 - 用
tr.data('index')和td.data('field')获取行索引和字段名，避免依赖渲染顺序 - 输入框
value要取自td.text()，但注意去除空格和换行符（td.text().trim()） - 替换前先保存原始内容，用于失焦/回车时比对是否修改
<pre class="brush:php;toolbar:false;">table.on('cellClick(test)', function(obj){
const { tr, td, field, value } = obj;
// 排除表头、操作列（如 field === 'operate'）
if (field === 'id' || field === 'operate') return;
const $td = $(td);
const original = $td.text().trim();
const input = $(`<input type="text" class="layui-input" value="${original}">`);
$td.html(input);
input.focus();
});
编辑完成后如何保存并还原为文本
不能只监听 blur，还要支持回车提交——否则用户会反复点、输完还得点别处，体验断裂。
- 给输入框绑定
keydown监听Enter（event.keyCode === 13），立即触发保存 -
blur事件里做最终提交，避免焦点意外丢失导致编辑态残留 - 调用
table.cache['test'][rowIndex]更新缓存数据，再用table.updateCell()刷新视图（Layui 2.8+）或手动$td.text(newVal) - 务必校验输入值是否变化，未变则不发请求、不更新缓存，防止无意义刷新
容易忽略的坑：样式错位、焦点丢失、多列同时编辑
原地编辑不是加个 input 就完事——Layui 表格单元格默认有 padding 和 line-height，直接塞 input 会导致高度塌陷或文字偏移。
- 给输入框加
style="width:100%;height:100%;padding:0 8px;"，并设置box-sizing: border-box - 用
setTimeout(() => input.select(), 0)确保聚焦后全选文字（尤其移动端） - 每次进入编辑前，先遍历所有
.layui-table-body td input，blur()其他正在编辑的输入框，防止多个 input 同时存在 - 如果字段是数字类型，记得在保存前用
parseFloat()或正则过滤非法字符，避免NaN写入缓存
真正麻烦的从来不是加个输入框，而是让输入框「看起来像它本来就在那儿」，且不干扰表格滚动、排序、分页的正常行为。
