原生html表格不支持单元格编辑，contenteditable会破坏语义、焦点跳转和输入控制；安全方案是javascript动态替换为表单控件，按需切换编辑态与显示态，并同步更新数据源。
原生 HTML 表格本身不支持单元格编辑，contenteditable 看似能“开箱即用”，但会破坏语义、焦点跳转和输入控制——真正可用的方案必须用 JavaScript 动态替换 <td> 为表单控件。
<h3>为什么不能直接用 <code>contenteditable
给 <td> 加 <code>contenteditable="true" 后，你马上会遇到：Tab 键无法顺序跳转到下一个单元格、粘贴内容可能带入 HTML 标签、屏幕阅读器读不出编辑状态、数字列无法阻止字母输入。更关键的是，textContent 提取时无法过滤富文本残留，导致数据污染。它适合临时标注，不适合数据录入场景。
怎么安全地切换编辑态与显示态
核心是“按需替换 + 精准还原”：点击 <td> 时，用对应表单控件替换成它的 innerHTML，并保存原始值；失焦或回车时校验、写回数据源、再换回纯文本 <code><td>。
<ul>
<li>单行文本 → <code><input type="text">，监听 input 实时过滤非法字符（如数字列用 type="number" + pattern）
<textarea></textarea>，注意设置 rows 和 wrap="soft"
<select></select> 配合预设 <option></option>，value 必须与数据字段严格对齐cell.dataset.originalValue = cell.textContent 记录原始值，避免 ESC 取消时丢失如何把编辑值同步到真实数据源
多数人卡在“改了 DOM 却没改数据”，刷新就丢。关键不是渲染表格，而是定位并更新 JS 中的数据对象。
- 每行加
data-id（如<tr data-id="123">），编辑时用 <code>event.target.closest("tr").dataset.id拿 ID - 用
cell.cellIndex查列索引，映射到字段名数组（如["id", "name", "email"][cell.cellIndex]） - 找到对应数据项后，直接赋值：
tableData.find(item => item.id == id)[fieldName] = newValue - 若对接后端，
fetch成功后再更新本地数据；失败则还原 DOM 和tableData，否则状态错乱 -
Enter：必须event.preventDefault()，否则触发表单提交导致页面刷新 -
Escape：恢复dataset.originalValue，移除表单控件，重新聚焦原<td> <li> <code>Tab：监听keydown，计算下一个可编辑单元格位置，focus()过去并自动进入编辑态 -
blur：失焦时自动保存（除非刚按了 ESC），这是防止用户点别处却丢数据的最后一道防线
键盘交互细节决定体验是否“直觉”
用户默认按 Enter 提交、ESC 放弃、Tab 跳转——这些行为不显式拦截就会出问题。
真正的难点不在“能不能做”，而在于光标焦点管理、数据一致性校验、以及不同输入类型下的边界处理——比如日期列要防手动输错格式，空值逻辑要和后端约定清楚，这些细节漏掉一个，用户就会觉得“总有点不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
