循环访问子节点时，Td .innerHTML不显示

Question

写入大型表时，循环访问子级以获取td并更改innerHTML不会显示值。但是，添加

console.log(table.children[Math.floor(id/3)].children[id % 3].innerHtml);

在displayChar()结束时返回

for ( var i = 0; i < 9; i++){
	displayChar('-', i);
}

function displayChar(char, id){
  var table = document.getElementById('table').tBodies[0];
  table.children[Math.floor(id/3)].children[id % 3].innerHtml = char;
}

<table id="table">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
</table>

是否有正当编辑innerHTML的值但未在文档中显示的原因，而在使用id时所有内容都有效，如下所示？

for ( var i = 0; i < 9; i++){
	displayChar(i+'', i);
}

function displayChar(char, id){
  document.getElementById(id).innerHTML = char;
}

<table id="table">
  <tr>
    <td id='0'>0</td>
    <td id='1'>0</td>
    <td id='2'>0</td>
  </tr>
  <tr>
    <td id='3'>0</td>
    <td id='4'>0</td>
    <td id='5'>0</td>
  </tr>
  <tr>
    <td id='6'>0</td>
    <td id='7'>0</td>
    <td id='8'>0</td>
  </tr>
</table>

Answer 1

Javascript区分大小写
它是innerHTML而不是innerHtml。
Documentation

for ( var i = 0; i < 9; i++){
	displayChar('-', i);
}

function displayChar(char, id){
  var table = document.getElementById('table').tBodies[0];
  table.children[Math.floor(id/3)].children[id % 3].innerHTML = char;
}

<table id="table">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
</table>

Answer 2

如果这有帮助，那么如果您愿意，这是一个简单的代码：

for (var i = 0;i<9;i++) {
document.getElementsByTagName('td')[i].innerHTML = "-";
}

只是不为标记td设置ID document.getElementsByTagName()方法将为所有tds

执行此操作