开发者问题收集

使用js修改表格单元格的文本

2021-01-09
633
javascript html

我有一个 html 表格，我想使用 js 更改不同单元格内的文本。我的表格如下所示： 

    <tr><td colspan="7" style="text-align:center;">Calendar evenimente tds</td></tr>
    <tr>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
      <th>Data4</th>
      <th>Data5</th>
      <th>Data6</th>
      <th>Data7</th>
    </tr>
    <tr>
      <td id="col1row1">null</td>
      <td id="col2row1">null</td>
      <td id="col3row1">null</td>
      <td id="col4row1">null</td>
      <td id="col5row1">null</td>
      <td id="col6row1">null</td>
      <td id="col7row1">null</td>
    </tr>
</table>

我的 js 脚本如下所示： 

var j=0;
for(j=0;j<=7;j++)
document.getElementById("col"+j+"row1").innerHTML=j;

但我收到此错误： 

Uncaught TypeError: Cannot set property 'innerHTML' of null

我的问题是，修改 HTML 表格单元格内的文本的正确方法是什么，我做错了什么？

3个回答

由于没有 col0 ，循环的第一次迭代失败。您不必像这样迭代 ID，只需按标记循环遍历元素即可： 

Array.from(document.getElementsByTagName('td')).forEach((td, index) => {
  td.innerHTML = index
})

如果您希望计数从 1 开始，请改用 td.innerHTML = index + 1 。

Zac Anger
2021-01-09

循环调用不存在的 ID。由于 html 中没有 col0row1，因此使循环以 1 开始，而不是从零开始 

 var j;
for(j=1;j<=7;j++){
document.getElementById("col"+j+"row1").innerHTML=j;
}
Rowan Mamdouh
2021-01-09

由于 j = 0，没有 id 为“col0row1”的元素，因此未捕获错误。 

var j = 1
for(j=1;j<=7;j++){
    document.getElementById("col" + j + "row1").innerHTML = j;
}
Nitesh
2021-01-09