企业官网建设流程全解析

• 文档/教程
• 前端

导读

本文基于 Modern JavaScript Tutorial（en.javascript.info）中"Edit TD on click"一课的官方题解，系统讲解如何用原生 JavaScript 为表格单元格实现"点击即编辑"的交互：点击<td>后原地出现一个大小一致、无边框的<textarea>，单元格下方弹出 OK / CANCEL 按钮用于确认或取消编辑。读完本文你将掌握事件委托（event delegation）、closest()定位目标、focus()聚焦、以及"单实例编辑状态"等前端实战技巧，并能直接复用完整可运行的实现代码。

任务背景：需求拆解

该任务出自 2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md，核心需求如下：

• 点击单元格进入编辑态：点击<td>后，单元格内出现<textarea>，用户可修改其中的 HTML 内容；
• 几何保持不变：<textarea>与单元格同宽同高、无缩放（no resize），所有布局尺寸与点击前完全一致；
• OK / CANCEL 按钮：编辑期间单元格下方出现两个按钮，分别用于"提交修改"与"取消编辑"；
• 同一时刻只允许一个单元格处于编辑态：当某个<td>正在编辑时，点击其他单元格应被忽略；
• 必须使用事件委托：表格可能包含大量单元格，不能给每个<td>单独绑定监听器。

官方题解 solution.md 给出了四步核心思路，本文将其逐条展开并结合仓库中的完整源码实现进行深度讲解。

核心思路：一个委托监听器 + 一个编辑状态

所有交互（进入编辑、点击 OK、点击 CANCEL、忽略编辑期间的点击）都收敛到表格上的唯一一个click监听器，这就是事件委托的典型应用——把监听器挂到祖先元素（<table>）上，用event.target.closest()判断实际点击的目标，从而避免为每个<td>单独注册事件。

同时，用模块级变量editingTd保存"当前正在编辑的单元格及其原始内容"，作为整个表格的单实例编辑状态：

let editingTd;

这个变量是整个实现的枢纽：它既用于在编辑期间拦截其他单元格的点击（if (editingTd) return;），也用于 CANCEL 时恢复单元格的原始 HTML。

四步实现详解

官方题解将实现拆成四个步骤，下面逐一结合 solution.view/script.js 的代码展开。

第 1 步：点击时用<textarea>替换单元格内容

点击<td>后，需要用同尺寸、无边框的<textarea>替换单元格内部内容。关键在于精确计算几何尺寸，保证布局不跳动：

let textArea = document.createElement('textarea'); textArea.style.width = td.clientWidth + 'px'; textArea.style.height = td.clientHeight + 'px'; textArea.className = 'edit-area'; td.innerHTML = ''; td.appendChild(textArea);

• td.clientWidth/td.clientHeight是不含边框的内容区尺寸，正好与textarea的内容盒匹配；
• 用className = 'edit-area'挂接样式类，配合 CSS 去掉边框、边距与缩放手柄（详见下文"CSS 细节"）；
• 先清空td.innerHTML再appendChild，避免残留文本与 textarea 并存。

第 2 步：把td.innerHTML同步到textarea.value

进入编辑态前，先把单元格的现有内容（可能是包含<strong>、<br>的富 HTML）作为初始值写入 textarea：

textArea.value = td.innerHTML;

注意这里的语义：textarea.value中存放的是文本形式的 HTML 字符串。提交时这段文本会作为新 HTML 直接写回td.innerHTML，因此用户编辑的是"HTML 源码文本"而非纯文本——这是该实现的一个重要特性，适合简单富内容单元格的快速编辑。

同时，原始内容被保存在editingTd.data中，供 CANCEL 恢复：

editingTd = { elem: td, data: td.innerHTML };

第 3 步：聚焦 textarea

创建 textarea 后立即调用focus()，让用户无需再次点击即可直接输入：

textArea.focus();

这里正好呼应父级章节 focus/blur 事件详解 中提到的elem.focus()方法——它用于以编程方式把焦点设置到元素上。<textarea>属于浏览器默认支持聚焦的表单元素，因此focus()可以直接生效，无需tabindex。

第 4 步：在单元格下方渲染 OK / CANCEL 按钮并处理点击

用insertAdjacentHTML在单元格末尾追加控制条，包含 OK 与 CANCEL 两个按钮：

td.insertAdjacentHTML("beforeEnd", '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>' );

按钮的处理统一由表格上的委托监听器完成——根据event.target.closest('.edit-cancel,.edit-ok,td')的结果分支：点 CANCEL 走finishTdEdit(editingTd.elem, false)，点 OK 走finishTdEdit(editingTd.elem, true)。

完整实现代码逐段剖析

以下为 solution.view/script.js 的完整源码，它是官方题解四步思路的最终落地。

委托监听器：一次监听，三分支

let table = document.getElementById('bagua-table'); let editingTd; table.onclick = function(event) { // 3 possible targets let target = event.target.closest('.edit-cancel,.edit-ok,td'); if (!table.contains(target)) return; if (target.className == 'edit-cancel') { finishTdEdit(editingTd.elem, false); } else if (target.className == 'edit-ok') { finishTdEdit(editingTd.elem, true); } else if (target.nodeName == 'TD') { if (editingTd) return; // already editing makeTdEditable(target); } };

这段代码有四个值得注意的工程细节：

1. closest('.edit-cancel,.edit-ok,td')一次命中三类目标：按钮、单元格，甚至按钮内部可能的子元素都能被正确归约到所属容器，省去逐级parentNode遍历；
2. table.contains(target)兜底校验：防止点击表格外部时进入分支（比如点击th表头或其他区域）；
3. 按钮判断用className精确匹配：由于按钮没有额外 class，target.className恰好等于'edit-ok'/'edit-cancel'；
4. if (editingTd) return;实现"单编辑实例"：只要已有单元格处于编辑态，点击任何其他<td>都会被静默忽略，满足任务"同时只有一个单元格可编辑"的硬性要求。

进入编辑态：makeTdEditable

function makeTdEditable(td) { editingTd = { elem: td, data: td.innerHTML }; td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside let textArea = document.createElement('textarea'); textArea.style.width = td.clientWidth + 'px'; textArea.style.height = td.clientHeight + 'px'; textArea.className = 'edit-area'; textArea.value = td.innerHTML; td.innerHTML = ''; td.appendChild(textArea); textArea.focus(); td.insertAdjacentHTML("beforeEnd", '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>' ); }

editingTd在此被赋值为一个对象，同时保存元素引用与原始 HTML 快照——这正是取消编辑时能完美还原的前提。classList.add('edit-td')给单元格打上"编辑态"标记，CSS 据此把单元格设为position: relative，为下方绝对定位的控制条提供定位基准。

结束编辑态：finishTdEdit

function finishTdEdit(td, isOk) { if (isOk) { td.innerHTML = td.firstChild.value; } else { td.innerHTML = editingTd.data; } td.classList.remove('edit-td'); editingTd = null; }

• OK 提交：td.firstChild就是唯一的textarea，其value属性中的文本被当作 HTML 写回td.innerHTML；
• CANCEL 取消：从editingTd.data取回进入编辑态时保存的原始 HTML，完全还原单元格；
• 无论哪种路径，最后都移除edit-td类并置空editingTd，释放编辑状态，允许下一个单元格进入编辑。

CSS 细节：几何不变与按钮定位

编辑态的外观完全由 solution.view/my.css 控制，它承担了任务中"no resize、几何保持不变"的视觉要求：

.edit-td .edit-area { border: none; margin: 0; padding: 0; display: block; /* remove resizing handle in Firefox */ resize: none; /* remove outline on focus in Chrome */ outline: none; /* remove scrollbar in IE */ overflow: auto; } .edit-controls { position: absolute; } .edit-td { position: relative; padding: 0; }

逐条解读：

• resize: none：禁用 textarea 右下角的拖拽缩放手柄（Firefox 特有），保证尺寸只由 JS 写入的宽高决定；
• outline: none：去掉聚焦时的描边（Chrome 默认会给聚焦的 textarea 加轮廓），避免视觉突兀；
• overflow: auto：去掉 IE 下多余滚动条的显示（过长的内容仍可滚动查看，不影响布局）；
• .edit-td { position: relative; padding: 0; }：单元格自身成为定位上下文，且清除内边距，让 textarea 精确铺满原内容区；
• .edit-controls { position: absolute; }：控制条脱离文档流，叠放在单元格正下方，不影响表格行高。

页面结构 solution.view/index.html 是一张八卦图（Bagua Chart）表格，9 个数据单元格由bagua.css（solution.view/bagua.css）着色；任务起点是 source.view/script.js 中留空的/* your code */骨架，读者可以自行先尝试实现，再对照题解验证。

设计要点复盘

为什么不用 focus/blur 完成"单编辑实例"？

一个常见的替代思路是：进入编辑时给 textarea 注册blur事件，失焦即结束编辑。但官方实现刻意选择了委托 click + 显式按钮方案，原因可从 focus/blur 章节 中归纳：

1. blur触发时机难以精确控制：点击 CANCEL 按钮会使 textarea 失焦从而提前结束编辑，与"CANCEL 恢复原始内容"的语义冲突；
2. focus/blur不冒泡：若想监听整个表格的焦点变化，必须依赖捕获阶段或focusin/focusout，复杂度更高；
3. 点击其他单元格时，由于编辑态已通过if (editingTd) return;拦截，根本不会触发第二次编辑，行为完全确定。

事件委托的价值

任务明确要求"表格可能有很多单元格，使用事件委托"。委托的核心收益是：无论表格有 9 个还是 900 个单元格，都只需一个table.onclick；新增单元格也无需重新绑定。closest()是委托定位的标准工具——它在 DOM 树中从event.target向上查找，命中.edit-cancel、.edit-ok或td中的任意一个即返回。

状态变量的职责分离

• editingTd.elem：当前编辑的单元格引用，供finishTdEdit直接操作；
• editingTd.data：原始 HTML 快照，供 CANCEL 还原；
• editingTd非空即代表"编辑进行中"，同时充当互斥锁。

三者合一，用最少的全局状态完成了"编辑中拦截 + 取消恢复"两大功能。

小结

"Edit TD on click" 是理解前端交互编程的经典案例，它把四个核心知识点浓缩在几十行代码里：

1. 事件委托：单一监听器处理进入编辑、OK、CANCEL 三类点击，closest()精准归约目标；
2. 几何保真：clientWidth/clientHeight配合resize: none、border: none实现无跳动替换；
3. 焦点管理：textarea.focus()让编辑态无缝衔接用户输入，同时巧妙规避了focus/blur不冒泡、时机难控的问题；
4. 状态快照：editingTd.data保存原始 HTML，使"取消编辑"成为零成本的回退操作。

完整可运行示例位于 solution.view/index.html，配合 solution.view/script.js 与 solution.view/my.css 即可在本地直接打开体验。若想进一步理解背后的 focus/blur 机制（包括tabindex、捕获阶段委托与focusin/focusout），可继续阅读 2-ui/4-forms-controls/2-focus-blur/article.md 的完整章节。

• 文档/教程
• 前端