单击单元格自动清空内容需谨慎实现：监听td/th的click事件，检查非空后清空并聚焦；支持Delete/Backspace快捷键并阻止默认行为；区分控件类型（select、checkbox等）执行对应清空逻辑；添加节流或轻量提示防误触。
点击单元格时自动清空内容，而不是双击或右键
直接单击就清空，用户预期最简单，但容易误触。关键是在 click 事件中区分「想编辑」和「想清空」——实际场景里，多数人点一下是选中/聚焦，点两下才编辑。所以清空动作更适合绑定在「单击且当前有内容」时触发，同时加一个视觉反馈（比如淡灰色占位提示），避免用户困惑。
- 用
addEventListener('click', ...)监听<td>或<th>，不要监听整个<table>，否则事件冒泡会干扰表头排序等逻辑 - 清空前检查
cell.textContent.trim() !== ''，防止空白字符被误判为“有内容” - 清空后立即调用
cell.focus()，保持焦点在该单元格，方便用户立刻输入新内容 - 避免对
contenteditable="true"的单元格直接清空——它可能含内联元素，应优先用cell.innerHTML = ''而非textContent = ''
支持键盘快捷键（如 Delete / Backspace）清空当前聚焦单元格
用户习惯用键盘操作，尤其表格数据量大时。但原生 Delete 键在可编辑单元格中默认不触发任何行为，必须手动拦截并阻止默认动作，否则可能误删整行或触发浏览器历史回退。
- 监听
keydown事件，判断e.key === 'Delete'或e.key === 'Backspace' - 只在
e.target是<td>或<th>且有焦点时生效，避免影响页面其他输入框 - 必须调用
e.preventDefault()，否则部分浏览器会在 contenteditable 单元格中把光标前/后字符删掉，而非清空全部 - 清空后建议保留焦点：
e.target.focus()，别让焦点跳到地址栏或别的地方
清空逻辑要兼容不同单元格类型：普通文本、下拉选择、复选框
纯文本单元格清空就是设为空字符串，但遇到 <select> 或 <input type="checkbox"> 就得按控件规则处理，否则 DOM 状态和视觉不一致。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 如果是
<select>，清空应设select.selectedIndex = 0（假设首项是空选项），或显式设select.value = '' - 如果是复选框，清空对应取消勾选：
checkbox.checked = false；如果是多选组，需遍历所有同 name 的input[type="checkbox"] - 含子元素的单元格（如带图标或 badge 的），不能粗暴用
innerHTML = ''，应只清空文本节点或指定容器（如cell.querySelector('.cell-content')?.textContent = ''） - 避免用
innerText清空——它会触发重排，且在隐藏元素上返回空字符串，造成误判
防误操作：加短延迟或二次确认机制
单击即清空风险高，尤其在快速浏览或误触时。生产环境不建议无保护清空，至少加一个 200ms 内连续两次点击才触发的节流，或者对非空单元格弹出轻量提示（不是模态框）。
立即学习“前端免费学习笔记（深入）”；
- 记录上次点击时间戳：
if (Date.now() - lastClickTime ，再更新 <code>lastClickTime - 不推荐用
confirm()，打断流程；可用 tooltip 式提示：“点击再次清空”，2 秒后自动消失 - 对关键列（如 ID、状态字段）可禁用清空，通过 data 属性标记：
<td data-locked="true">，代码中跳过这类单元格 - 清空后建议写入 undo 栈（哪怕只是 localStorage 存最近一次值），否则用户真删错了没法补救
真正麻烦的是混合内容单元格——比如一个 <td> 里既有 <span class="value"> 又有 <button class="edit-btn">。这时候清空目标必须明确，不能靠父级 textContent 一刀切，否则按钮也被删了。
