核心是利用事件冒泡在table或tbody上监听点击，通过event.target.closest('tr')定位行、matches()识别编辑按钮，动态替换td为input实现编辑，再以enter/blur统一提交或取消。

事件委托处理表格行内编辑按钮，核心是利用事件冒泡，在表格（table）或 tbody 上监听点击事件，再通过事件对象的 target 判断是否点中了某一行的编辑按钮，从而动态绑定或触发编辑逻辑，避免为每个按钮单独绑定事件。

监听容器，识别目标按钮

不要给每行的“编辑”按钮都调用 addEventListener，而是把监听器加在表格或 <tbody> 上。点击发生时，检查 <code>event.target 是否匹配编辑按钮（比如 class="edit-btn" 或 type="button"），再向上查找最近的 <tr> 行元素： <ul> <li>用 <code>event.target.closest('tr') 获取被点击按钮所在的行

用 event.target.matches('.edit-btn') 或 event.target.classList.contains('edit-btn') 确认点击的是编辑按钮

若匹配成功，即可获取该行数据（如 tr.dataset.id 或从单元格读取文本）

进入编辑态：替换内容为输入框

点击编辑按钮后，需将当前行的指定列（如姓名、邮箱）由纯文本转为可编辑的 <input> 或 <textarea></textarea>。常见做法：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 遍历目标 <td>，保存原始文本（如存到 <code>data-original 属性或临时变量）
• 将 td.innerHTML 替换为带值的 input，并聚焦
• 为 input 添加回车（Enter）和失焦（blur）事件，用于提交或取消编辑

保存与取消：统一处理提交逻辑

保存操作不依赖按钮绑定，而是在 input 的事件中触发：

• 按 Enter 键时，调用保存函数，把 input 值写回 td 并还原为只读状态
• 失去焦点（blur）时同样执行保存，兼顾鼠标点击其他地方的场景
• 提供“取消”按钮（或 ESC 键），恢复原始文本，清空 input 并还原 HTML

注意事件代理的边界与兼容性

确保代理容器能捕获到按钮事件，同时避免干扰其他操作：

• 表格结构要规范，<tr> 内按钮应直接或间接在 <code><td> 中，避免被其他包裹元素阻断冒泡 <li>如果用了框架（如 React/Vue），注意原生事件委托与虚拟 DOM 更新的时机冲突，建议优先使用框架自身机制；纯 JS 场景下完全适用</li> <li>移动端需额外处理 <code>touchstart 或添加 cursor: pointer 防止延迟响应

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南