原生 不支持单元格级编辑，contenteditable="true" 仅是权宜之计；应采用双击时动态替换为 等表单控件的方案，并严格处理 enter/escape/blur 事件、类型校验与数据同步。
原生 <table> 不支持单元格级编辑，<code>contenteditable="true" 看似能快速启用，但实际会导致焦点跳转异常、粘贴污染、输入类型失控、移动端兼容差——它不是“可编辑表格”的解决方案，而是临时标注的权宜之计。
为什么不能给 <td> 直接加 <code>contenteditable
加了之后你马上会遇到：Tab 键无法顺序跳转到下一个可编辑单元格；Enter 默认换行而非提交；粘贴 Word 内容会带入 <span style="color:red"></span> 这类标签；textContent 取值时混入不可见字符或换行符；屏幕阅读器无法识别编辑状态。更关键的是，数字列拦不住字母输入，邮箱列不校验格式，数据源头完全失控。
点击单元格时用 <input> 动态替换 <td> 的 DOM 结构
<p>这是目前最可控、兼容性最好、语义最清晰的做法：保留原始 <code><td> 静态结构，只在用户触发编辑时插入表单控件，并严格对齐尺寸和样式。
<ul>
<li>监听 <code>dblclick（不是 click），避免与行选中等交互冲突
<input type="text"> 或 <textarea></textarea>，设置 style="width:100%; height:100%; margin:0; padding:4px; border:1px solid #999;"
cell.dataset.originalValue = cell.textContent 存原始值，ESC 时可还原cell.innerHTML，再 appendChild(input)，最后 input.focus()
touchstart + setTimeout）或显式「编辑」按钮
Enter、Escape、blur 三个事件必须统一收尾
这三个事件不是可选项，是编辑闭环的底线。缺一不可，否则用户一定会丢数据或卡在编辑态。
-
Enter：必须event.preventDefault()拦掉默认换行，然后立即保存、还原<td>、更新数据源 <li> <code>Escape：恢复dataset.originalValue，移除<input>，重新聚焦原<td>，且不修改任何数据源 <li> <code>blur：作为兜底，防止用户点到别处就走；Firefox 下建议用setTimeout(() => { ... }, 0)微任务延迟执行，避免时机错乱 - 所有保存逻辑必须定位到真实数据对象——靠
tr.dataset.id+cell.cellIndex映射字段名，而不是只改 DOM - 数字列 →
<input type="number">+pattern="[0-9]*"（iOS 软键盘适配），失焦时强制转Number() - 邮箱列 →
<input type="email">+required，blur时用/^[^\s@]+@[^\s@]+\.[^\s@]+$/校验 - 下拉列 →
<select></select>，value必须与数据字段值完全一致（注意字符串/数字类型） - 多行文本 →
<textarea rows="2" wrap="soft"></textarea>，禁用resize防止破坏对齐 - 所有控件都应加
class="inline-editor"，配合 CSS 移除td的padding，避免溢出或留白
不同输入类型要配不同控件和校验逻辑
一个 <input> 填所有字段是最大误区。数字、邮箱、下拉、多行文本，各自有不可替代的语义和约束能力。
真正难的不是让单元格变可编辑，而是光标在几十个单元格间跳转时不丢焦点、方向键不误触、ESC 按下瞬间值立刻回滚、数据数组和 DOM 始终严格同步——这些细节没处理好，用户第一次编辑就会放弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
