应使用 javascript 批量生成表格行：用 array.from 或 fill().map 构造索引，拼接安全转义后的 html 字符串并 innerhtml 一次性写入；含用户输入时需 escapehtml 转义；需绑定事件则改用 documentfragment。
用 JavaScript 一次性生成 10 行 ，别手敲
手写 10 个 <tr><td>...</td></tr> 不仅费时，还容易漏闭合标签或错位。真实开发中，只要数据结构明确（比如每行 3 列），就该交给 JS 批量生成。
- 先准备好数据源：可以是硬编码数组，也可以是后端返回的 JSON
- 用
Array.from({ length: 10 }, (_, i) => ...) 或 new Array(10).fill().map(...) 快速构造索引序列
- 对每行生成
<tr>
<td>${i+1}</td>
<td>name-${i}</td>
<td>status</td>
</tr> 字符串
- 最后用
innerHTML 一次性写入 <tbody> —— 比循环 <code>appendChild 快 5 倍以上
避免 innerHTML XSS 风险的最小化处理
如果数据含用户输入（比如从 API 拿到的 name 字段），直接拼进 innerHTML 会触发 XSS。但你不需要引入完整 sanitizer 库。
- 对每个字段做
textContent 转义：写个简短函数 escapeHtml(str) { return str.replace(/[&"'/]/g, c => ({'&':'&','':'>','"':'"',"'":''','/':'/'}[c])); }
- 只在插入前调用一次，不影响性能
- 若字段全是数字或固定枚举值（如 status: 'active' | 'inactive'），可跳过转义，但必须加注释说明依据
用 DocumentFragment 替代 innerHTML 的适用场景
当你要往表格里插入带事件监听器的元素（比如每行一个「编辑」按钮），innerHTML 会丢掉绑定的 JS 行为。这时候得用 DocumentFragment。
- 创建
const frag = document.createDocumentFragment()
- 循环中用
document.createElement('tr') + appendChild 构建完整行，再 frag.appendChild(row)
- 最后
tbody.appendChild(frag) —— DOM 只触发一次重排
- 注意：不要在循环里反复调用
tbody.appendChild，那是性能杀手
VS Code 快捷键辅助手写（仅限调试或极小规模）
真要临时手写 10 行，别用复制粘贴——容易错行。用 VS Code 内置多光标功能更稳：
- 输入第一行
<tr>
<td></td>
<td></td>
<td></td>
</tr>
- 把光标停在
<tr> 开头，按 <code>Ctrl+D 选中它，再连按 9 次 Ctrl+D 选中后续 9 个相同片段
- 按
Ctrl+Shift+L 进入多光标编辑，输入数字或内容即可批量替换
- 此法适合写 demo 或改旧代码，不推荐用于生产环境的数据初始化
实际项目里，10 行只是起点。一旦行数涨到 200+，就得切虚拟滚动；而数据来源是否可控，直接决定你该选 innerHTML 还是 DocumentFragment。这两点漏判，后面 debug 会花掉远超生成时间的成本。
手写 10 个 <tr><td>...</td></tr> 不仅费时，还容易漏闭合标签或错位。真实开发中，只要数据结构明确（比如每行 3 列），就该交给 JS 批量生成。
- 先准备好数据源：可以是硬编码数组，也可以是后端返回的 JSON
- 用
Array.from({ length: 10 }, (_, i) => ...)或new Array(10).fill().map(...)快速构造索引序列 - 对每行生成
<tr> <td>${i+1}</td> <td>name-${i}</td> <td>status</td> </tr>字符串 - 最后用
innerHTML一次性写入<tbody> —— 比循环 <code>appendChild快 5 倍以上避免 innerHTML XSS 风险的最小化处理
如果数据含用户输入（比如从 API 拿到的 name 字段），直接拼进
innerHTML会触发 XSS。但你不需要引入完整 sanitizer 库。- 对每个字段做
textContent转义：写个简短函数escapeHtml(str) { return str.replace(/[&"'/]/g, c => ({'&':'&','':'>','"':'"',"'":''','/':'/'}[c])); } - 只在插入前调用一次，不影响性能
- 若字段全是数字或固定枚举值（如 status: 'active' | 'inactive'），可跳过转义，但必须加注释说明依据
用 DocumentFragment 替代 innerHTML 的适用场景
当你要往表格里插入带事件监听器的元素（比如每行一个「编辑」按钮），
innerHTML会丢掉绑定的 JS 行为。这时候得用DocumentFragment。- 创建
const frag = document.createDocumentFragment() - 循环中用
document.createElement('tr')+appendChild构建完整行，再frag.appendChild(row) - 最后
tbody.appendChild(frag)—— DOM 只触发一次重排 - 注意：不要在循环里反复调用
tbody.appendChild，那是性能杀手
VS Code 快捷键辅助手写（仅限调试或极小规模）
真要临时手写 10 行，别用复制粘贴——容易错行。用 VS Code 内置多光标功能更稳：
- 输入第一行
<tr> <td></td> <td></td> <td></td> </tr> - 把光标停在
<tr> 开头，按 <code>Ctrl+D选中它，再连按 9 次Ctrl+D选中后续 9 个相同片段 - 按
Ctrl+Shift+L进入多光标编辑，输入数字或内容即可批量替换 - 此法适合写 demo 或改旧代码，不推荐用于生产环境的数据初始化 实际项目里，10 行只是起点。一旦行数涨到 200+，就得切虚拟滚动；而数据来源是否可控，直接决定你该选
innerHTML还是DocumentFragment。这两点漏判，后面 debug 会花掉远超生成时间的成本。 - 对每个字段做
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
