应使用事件委托，在或上监听click/touchstart事件，用event.target.closest("TD, TH")安全捕获目标单元格，避免直接为每个绑定事件导致动态内容失效或重复绑定。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
怎么让表格单元格响应点击而不破坏结构
直接给每个 <td> 绑 <code>onclick 是最常见但最危险的做法——动态插入行、Vue/React 渲染后、AJAX 刷新表格时，新单元格根本没绑上事件，或者重复绑定导致多次触发。
正确做法是用事件委托，在 <table> 或 <code><tbody> 上监听，再用 <code>closest("td, th") 安全捕获目标单元格。DOM 中 event.target.tagName 返回的是大写字符串，所以必须写 "TD" 或 "TH"，不能写小写。
- 避免用
e.target === cell做判断，因为用户可能点到单元格内的文字、<span></span>或图标，此时e.target是子元素，不是<td> <li>如果表格有固定表头（<code><thead>），且希望表头单元格也响应点击，<code>closest("td, th")依然有效；不用额外处理 - 移动端需补
touchstart监听，否则有约 300ms 延迟；可合并写成addEventListener("click touchstart", ...)
如何只让部分单元格可点击
别用 JS 判断 ID 或 class 再做条件分支，那样逻辑分散、难维护。更干净的方式是用 CSS 的 pointer-events: none 主动禁用不响应的单元格。
比如你有一行单位换算：<td id="metre_">Metre</td> 只想让 “Metre”“Centimetre” 可点，“Fermi” 不可点，就给 Fermi 单元格加内联样式或 class：
立即学习“前端免费学习笔记（深入）”；
<td id="fermi_" style="pointer-events: none;">Fermi</td>
- 这个属性不影响视觉呈现，也不影响 DOM 结构，语义完全合规
- 注意它会同时禁用
:hover和:active，如果需要悬停效果，改用opacity: 0.7; cursor: default;+ JS 中if (!cell.classList.contains("disabled")) { ... }过滤 - IE11 不支持
pointer-events，如需兼容，降级方案是在事件回调里加if (e.target.id && ["metre_", "centimetre_"].includes(e.target.id)) { ... }
点击后高亮当前单元格的实现要点
高亮不是简单改 style.backgroundColor，硬编码样式会覆盖原有 CSS、无法响应 :hover、也不支持伪元素增强反馈。
应该用 classList.add("highlight") 切换 class，并在 CSS 中定义：
.highlight { background-color: #d0e7ff !important; }
- 必须加
!important—— Bootstrap、Ant Design 等框架的table-striped或 hover 规则优先级更高，不加会被覆盖 - 不要用
background简写，它可能意外重置background-image或background-position - 如果要加视觉标记（比如右上角打勾），用
::after伪元素，避免污染 DOM；但注意它对屏幕阅读器不可见，纯装饰用途
双击 vs 单击：什么时候该用哪个触发方式
单击触发编辑或跳转容易和文本选择冲突：用户想选中单元格文字复制，结果误触了点击逻辑。双击（ondblclick）是表格编辑的事实标准，干扰少、意图明确。
- 如果业务强制要求单击即响应（比如表格作为菜单使用），务必加防抖和焦点判断：
if (e.target === cell && document.activeElement !== cell.querySelector("input")) { ... } - 用
contenteditable实现就地编辑时，blur是保存时机，但要注意：回车（Enter）默认会换行，需监听keydown拦截并手动触发保存 - 不要监听
click后立刻 focus input —— 移动端 Safari 在 click 后 focus input 会触发键盘弹出又瞬间收起，体验极差；改用setTimeout(() => input.focus(), 0)微任务延迟
