循环访问子节点时，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设置