双击单元格（dblclick）是更稳妥的编辑触发方式；若需单击编辑，则须判断焦点是否已在td内，并确保event.target为td本身或用closest('td')安全获取。
点击单元格进入编辑模式要监听什么事件
直接用 click 事件就行，但得避开误触：比如用户只是想选中文本、或在已编辑状态里点来点去。更稳妥的做法是监听 dblclick（双击），这是表格编辑的通用触发习惯；如果业务要求单击即编辑，那就得加判断——先检查当前焦点是否已在该 td 内部，避免重复创建输入框。
关键细节：event.target 必须是 td 元素本身，不能是它里面的文字节点或子标签。建议用 event.target.closest('td') 安全获取目标单元格。
- 不要给
table或tbody绑全局click，容易干扰排序、选择等其他交互 - 禁用
contenteditable="true"方案——它无法控制输入类型（比如数字校验）、不兼容键盘快捷键（如 Tab 切换）、且提交时取值不可靠 - 双击后立即调用
focus()到新建的input，否则光标不会出现
编辑态替换 DOM 的正确方式
把 td 的 textContent 取出来，清空它，再 append 一个 input 元素。别用 innerHTML = '<input...>'</input...>，会丢失可能存在的 data- 属性或绑定的事件委托上下文。
输入框需要复用原单元格的关键属性：比如设置 input.value = td.textContent.trim()，同时保留 td.dataset.id、td.className（用于后续样式还原），甚至可以透传 td.getAttribute('data-type') 来决定 input 类型（type="number" 还是 type="text"）。
立即学习“前端免费学习笔记（深入）”；
-
input必须设size或style.width，否则默认太窄，影响体验 - 务必设置
input.setAttribute('autocomplete', 'off')，防止浏览器自动填充覆盖原始值 - 替换前保存原
td的textContent到临时变量，用于取消编辑时还原
什么时候触发保存？按 Enter 还是失焦？
两个时机都要响应：用户按 Enter 是明确提交意图，blur 是离开编辑态的兜底行为。但注意，blur 在点击其他可编辑单元格时也会触发，容易造成“编辑一个、保存上一个、再进下一个”的连锁反应，必须防抖或标记当前编辑状态。
保存动作本身不是发请求，而是先校验 + 更新本地数据模型。比如字段是邮箱，就用 input.checkValidity() 或正则测试；校验失败要高亮 input 并 preventDefault()，不能让 DOM 切换回只读态。
- 监听
keydown时只拦截Enter（e.key === 'Enter'），别用keyCode（已废弃） -
blur回调里加setTimeout(..., 0)，确保能捕获到紧接着的另一个click事件（比如点下一个单元格） - 保存成功后，用原
td的dataset或自定义属性更新 JS 数据源，例如rows[rowIndex].cells[colIndex] = newValue
退出编辑态后如何还原并保持焦点逻辑清晰
还原不是简单地把 input.value 写回 td.textContent。要区分三种退出路径：保存（写入新值）、取消（恢复旧值）、验证失败（保持编辑态）。取消操作通常绑定 Escape 键，对应 keydown 监听，此时直接移除 input、还原 textContent、再 td.focus() 即可。
最容易被忽略的是：当用户用鼠标点击页面其他区域（非表格）退出编辑时，blur 会触发，但此时你无法判断他是想取消还是提交——所以这种场景下，blur 应默认执行保存（只要校验通过），而不是强制取消。
- 所有编辑态的
input应统一加 class（如editing-cell），方便 CSS 隔离样式和 JS 查找 - 每次进入编辑前，先检查是否存在正在编辑的单元格，有则先保存/取消它，避免多个 input 同时存在
- 如果表格支持行内保存按钮（比如每行末尾一个 ✔️），那个按钮的 click 事件必须显式调用保存逻辑，而不是依赖 blur
