JavaScript无需为td设置唯一ID即可访问表格指定元素并赋值

你可以直接通过选择器获取表格下所有td元素，封装为你需要的table.at索引访问形式，无需给每个td设置单独ID： #

1. 示例HTML结构 #

先给你的表格加个可识别的标识（如果页面只有一个表格也可以省略，直接用标签选择器匹配）：

<table id="targetTable">
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <!-- 更多行按需添加 -->
</table>

2. JS封装与使用代码 #

// 获取目标表格节点
const table = document.getElementById('targetTable');
// 提取表格下所有td转为数组，挂载到table.at属性上
table.at = Array.from(table.querySelectorAll('td'));

// 直接使用你预期的语法，修改textContent属性即可设置文本
for(let i = 0; i < 10; i++) {
  table.at[i].textContent = i + 3;
}

补充说明 #

• td的索引顺序和HTML里的书写顺序完全一致：第一行第一个td是索引0，第一行第二个是索引1，第二行第一个是索引2，以此类推，符合你按顺序遍历赋值的需求。
• 如果需要按「第n行第m个td」的形式定位，可以直接用DOM原生表格API：table.rows[n].cells[m].textContent = '自定义内容'，无需额外封装。
• 循环时建议用table.at.length作为上限，避免访问不存在的td节点报错。

内容的提问来源于stack exchange，提问作者newP10092