本文介绍一种安全、可维护的方式，通过 DOM 操作而非 innerHTML 拼接，为二维表格中的每个单词 元素自动分配递增 ID（如 "1", "2", …），从而支持后续通过 document.getElementById() 精准控制单个单元格样式。
本文介绍一种安全、可维护的方式，通过 dom 操作而非 innerhtml 拼接，为二维表格中的每个单词 `
要实现对表格中每个单词的独立样式控制（例如调用 formatWord(2) 将第二个单词设为红色），关键在于为每个 <td> 元素赋予<strong>全局唯一、可预测、语义清晰</strong>的 <code>id 属性。原始代码使用 innerHTML += string 的方式拼接 HTML，虽简洁但存在两大隐患：一是无法安全插入动态 id（易引发 XSS 风险，若 words 含恶意字符串）；二是缺乏对 DOM 节点的直接引用，难以扩展交互逻辑。
推荐采用纯 DOM 构建方案——逐个创建元素、设置属性并挂载到文档中。以下是优化后的 arr2tbl 函数：
function arr2tbl(words, tableElement, ncols) {
// 清空原表格内容（可选，避免重复渲染）
tableElement.innerHTML = '';
let currentRow = document.createElement('tr');
tableElement.appendChild(currentRow);
words.forEach((word, i) => {
// 每隔 ncols 个元素，新建一行（除首行外）
if (i > 0 && i % ncols === 0) {
currentRow = document.createElement('tr');
tableElement.appendChild(currentRow);
}
const td = document.createElement('td');
td.id = String(i + 1); // ID 从 1 开始，如 "1", "2", ..., "5"
td.textContent = word;
currentRow.appendChild(td);
});
}
// 使用示例
const words = ['ac', 'bd', 'bf', 'uy', 'ca'];
arr2tbl(words, document.getElementById('wordTable'), 2);
配合 HTML 结构：
生成的 DOM 即为：
| ac | bd |
| bf | uy |
| ca |
✅ 优势说明：
-
id值严格按单词在words数组中的索引i+1生成，顺序稳定、无歧义； - 所有文本内容通过
textContent设置，天然防御 XSS； - 每个
<td> 是真实 DOM 节点，可随时通过 <code>getElementById获取并操作样式、事件等。你可立即定义样式控制函数：
function formatWord(wordID) { const el = document.getElementById(String(wordID)); if (el) { el.style.color = 'red'; el.style.fontWeight = 'bold'; } } // 调用示例 formatWord(2); // 第二个单词 "bd" 变红加粗 formatWord(5); // 第五个单词 "ca" 变红加粗⚠️ 注意事项：
- ID 必须为字符串类型，因此
td.id = i + 1应确保转换为字符串（String(i+1)或模板字面量`${i+1}`）； - 若需支持多次调用
arr2tbl重绘表格，请先清空目标<table>（如 <code>tableElement.innerHTML = ''），否则会重复追加行； - 空单元格（如最后一行缺位）也会获得 ID（如上例中
"6"），若不希望空<td> 存在，可在 <code>forEach中添加if (word)判断。该方案兼顾安全性、可读性与可扩展性，是动态表格 ID 分配的最佳实践。
- ID 必须为字符串类型，因此
