最稳妥的方式是用 document.createElement('table') 配合 insertRow() 和 insertCell() 创建表格，避免 XSS 和结构错误；表头应使用 thead.insertRow() + th 元素以提升语义与可访问性。
用 document.createElement('table') 生成表格最稳妥
直接拼接字符串（如 innerHTML = '）看似快，但容易因未转义数据导致 XSS，或因标签嵌套错误被浏览器静默丢弃。用原生 DOM 方法创建，浏览器会强制校验结构，...
'insertRow() 和 insertCell() 自动处理 tr 必须在 table 内、td 必须在 tr 内的规则。
常见错误现象：表格只显示第一行，或完全不渲染——大概率是把 td 直接 append 到 table，跳过了 tr 层级。
- 始终先调用
table.insertRow()得到tr实例，再对它调用insertCell() - 表头用
thead.insertRow()+th元素，比在tbody里塞td语义更清晰、可访问性更好 - 如果数据含 HTML 字符（如
&、），用cell.textContent = value而非innerHTML，避免意外解析
动态表格必须显式声明 tbody 标签
即使 HTML 源码里没写 tbody，浏览器解析时也会自动补上。但 JS 操作时若不显式获取或创建它，table.appendChild(row) 会把行插到 table 根节点下，破坏标准 DOM 结构，后续用 CSS 选中 tbody tr:hover 或 jQuery 的 $('tbody tr') 都会失效。
使用场景：需要给表格加斑马纹、悬停高亮、或绑定批量操作事件时，tbody 是必经容器。
- 创建新表格时，立刻调用
table.createTBody()，再用tbody.insertRow() - 向现有表格追加行，先
const tbody = table.querySelector('tbody') || table.createTBody()，再操作 - 不要依赖
table.rows获取所有数据行——它包含thead和tfoot的行，应改用tbody.rows
colspan 和 rowspan 必须在 td/th 上设置，不能靠 CSS
CSS 没有等效属性能替代 colspan 或 rowspan。试图用 display: grid 或 position: absolute 模拟合并单元格，会导致打印异常、屏幕阅读器无法识别、排序插件失效等问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
性能影响：大量 rowspan 会轻微拖慢渲染，因为浏览器需重新计算行高；但相比用 JS 手动布局模拟，原生属性仍是唯一可靠方案。
- 合并列用
cell.colSpan = 2（注意是colSpan，驼峰写法），不是colspan - 合并行时，被跨过的后续行对应列必须跳过创建该
td，否则视觉错位 - 动态生成带合并的表格，建议先按“逻辑二维数组”组织数据，再遍历生成 DOM，避免边算边插导致索引混乱
表格内容更新别直接替换 innerHTML，用 DOM diff 更安全
当表格数据频繁刷新（如实时监控），全量重写 tbody.innerHTML 会销毁所有子节点，已绑定的事件监听器、输入框焦点、滚动位置全部丢失。用户正在编辑某行，一刷新就光标消失，体验极差。
容易踩的坑：为图省事用 tbody.innerHTML = generateTrHtml(data)，结果发现 checkbox 状态、input 值、自定义属性全没了。
- 小范围更新（如单行状态变化）：直接修改目标
td.textContent或input.value - 整表刷新但需保留交互态：用
DocumentFragment批量创建新tr，再用replaceChildren()替换tbody，比innerHTML更可控 - 复杂场景（增删改查混合）：引入轻量 diff 库如
virtual-dom或手写最小 patch 逻辑，只更新差异节点
真实项目里最常被忽略的是：**动态表格一旦涉及用户输入（如 editable 单元格、复选框），就必须把 DOM 状态和数据模型严格同步**。靠 innerHTML 重绘等于放弃这个契约，后续任何筛选、导出、校验都会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
