### [动态表格单元格：唯一 ID 的分配写法](https://www.huociguo.com/article/1631)

**Published:** 2026-10-01T13:14:40

**Author:** 米了

**Excerpt:** 表格由脚本生成时，给每个单元格分配 id 是为了后续能精确定位。常见偏差是把 id 写在行上，或者用循环变量直…

表格由脚本生成时，给每个单元格分配 id 是为了后续能精确定位。常见偏差是把 id 写在行上，或者用循环变量直接拼接导致重名。

![记事本与图表资料](https://api.huociguo.com/wp-content/uploads/2026/10/e3.jpg)

单元格定位需要稳定可反推的标识

## 分配规则

id 需要同时满足两点：文档内唯一、能从数据反推。用行标识加列序号组合，比单纯递增数字更稳。

```
rows.forEach((row) => {
  const tr = document.createElement('tr');
  cells.forEach((cell, c) => {
    const td = document.createElement('td');
    td.id = `cell-${row.key}-${c}`;
    td.textContent = cell;
    tr.appendChild(td);
  });
});
```

## 纯数字 id 的问题

id 取值为单个数字在页面里合法，但同一页出现第二张表格就会冲突。以数字开头的 id 在 CSS 选择器里还需要转义，定位反而更麻烦。

## 按 id 改样式

```
const td = document.getElementById(`cell-${key}-${col}`);
if (td) td.classList.add('is-alert');
```

取到节点后改类名，而不是直接写行内样式。样式集中在样式表里，后续调整不必改脚本。

## 更省事的替代

| 做法  | 适用  |
| --- | --- |
| id 定位 | 需要跨时刻访问特定格 |
| data 标记 | 需要按业务值批量筛选 |
| 事件委托 | 只处理点击，不需要 id |

## 注意点

-   重渲染时要清理旧节点，否则 id 仍被残留节点占用。
-   id 不要包含空格与引号，拼接前对业务值做一次转义。
-   数量很大时改用事件委托，避免为每个格子绑定监听。

**Tags:** getElementById, 元素ID, 动态生成, 样式控制, 表格单元格

**Categories:** HTML5

---