时间戳

首页 > 解决方案 > insertCell() 不是函数

javascript - insertCell() 不是函数

问题描述

我正在尝试使用 javascript 动态创建一个表，我希望它有 10 行和 10 列。使用 insertRow() 添加正确数量的行没有问题，但我不能用 insertCell() 做同样的事情。

**HTML**
<div class="container-fluid">
<table id="tableMars"> 
</table>
</div>   


**JavaScript**
var mars = document.getElementById("tableMars");


function createMars(){
   for (var i=0; i<10; i++){
      var row = mars.insertRow();
      row.className += "tableRows";
      var columns = document.getElementsByClassName("tableRows");
    }
    for (var j=0; j<10; j++){
      columns.insertCell()
    }
}

我希望每行添加 10 列，但在控制台中运行函数时收到错误“insertCell() 不是函数”。

标签： javascripthtml

解决方案

您收到错误，因为columns返回多个元素的 HTMLCollection。你需要的是一个循环：

var mars = document.getElementById("tableMars");

function createMars() {
  for (var i = 0; i < 10; i++) {
    var row = mars.insertRow();
    row.className += "tableRows";
    var columns = document.getElementsByClassName("tableRows");
  }
  for (var j = 0; j < 10; j++) {
    for (let column of columns) {
      column.insertCell();
    }
  }
}

createMars();
table,
td {
  border: 5px solid #000;
}
<div class="container-fluid">
  <table id="tableMars">
  </table>
</div>

推荐阅读