不推荐给 直接加 contenteditable="true"——它破坏语义、输入失控、无法校验、移动端失效，且保存时数据脏乱；应改用双击替换为 的可控方案。
contenteditable 能让 <td> 看起来可编辑，但**不推荐用于真实表格编辑场景**——它会破坏语义、失控输入类型、无法校验、移动端几乎不可用，且保存时拿不到干净数据。
<h3>为什么直接给 <code><td> 加 <code>contenteditable="true" 会出问题
这不是配置不对，而是浏览器根本没为表格单元格设计这套交互：
-
Tab键无法顺序跳转到下一个<td>，焦点乱飞 <li>用户按 <code>Enter，Chrome 插入<div>，Firefox 插入 <code><p></p>，Safari 可能清空整格 - 粘贴 Word 内容会带
style、data-*、嵌套<span></span>，innerHTML里全是垃圾标签 -
textContent会混入换行符和零宽空格，数字列拦不住字母输入，邮箱列不校验格式 - iOS Safari 点击无响应，除非你加了
tabindex="0"+user-select: text+ 宽高样式，但光标仍常卡在开头 - 给每个
<td> 显式加 <code>tabindex="0"（否则 iOS 和部分 Android 根本点不动） - CSS 必须包含：
user-select: text; outline: none;，并设min-height: 1.2em和padding，否则视觉上“不可见” - 监听
input事件取textContent，别碰innerHTML；blur时做一次清洗：cell.textContent = cell.textContent.trim() - 拦截
Enter：event.key === 'Enter' && event.preventDefault()，否则结构崩坏 - 拦截
paste：event.preventDefault()后用event.clipboardData.getData('text/plain')插纯文本 - 监听
dblclick（不是click），避免与选中/排序等操作冲突 - 创建
<input type="text">，设置style="width:100%; height:100%; margin:0; padding:4px; border:1px solid #999;"，并严格对齐<td> 尺寸 <li>存原始值：<code>cell.dataset.originalValue = cell.textContent，Escape时还原 - 必须处理三个退出事件：
Enter（保存）、Escape（还原）、blur（兜底保存），缺一不可 - 保存逻辑不能只改 DOM，要定位到真实数据源：比如用
tr.dataset.id找行对象，再用cell.cellIndex映射字段名
如何用 contenteditable 做「最低成本临时方案」
仅适用于内部工具、原型演示、数据量小且无需校验的场景。必须满足以下条件才可能勉强可用：
真正可控的单元格编辑该怎么做
放弃 contenteditable，改用「双击替换为 <input>」模式，这是唯一能兼顾语义、校验、移动端和数据一致性的方案：
真正难的不是让单元格“看起来能编辑”，而是确保每次输入都落到正确的数据字段、类型受控、撤销可靠、移动端键盘行为一致——这些 contenteditable 都不负责，得你一行行补。
