如何在 Javascript 中创建和迭代动态生成的表？

Question

我想创建一个表格并从左上角到右下角对其进行编号。到目前为止我有这个代码：

function generateTable() {
  const tbl = document.createElement("table"); // Creates the table element
  const tblBody = document.createElement("tbody"); // Creates the table body element

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      const cell = document.createElement("td");
      row.appendChild(cell);
    }

    tblBody.appendChild(row);
  }
  
  for (var k = 0, cell; cell = tbl.cells[k]; k++)
    {
        const cellText = document.createTextNode(`cell nr. ${k}`); // The cell should be numbered 'k'
        cell.appendChild(cellText); // Puts the cellText into the cell
    }

  tbl.appendChild(tblBody); // Puts the table body into the table

  document.body.appendChild(tbl); // Puts the talbe into the document body

  tbl.setAttribute("border", "2");
}

但是，在 for 循环中意味着迭代单元格

for (var k = 0, cell; cell = tbl.cells[k]; k++)
    {
        const cellText = document.createTextNode(`cell nr. ${k}`);
        cell.appendChild(cellText);
    }

我收到错误

Uncaught TypeError: Cannot read properties of undefined (reading '0')

这个错误是什么意思？我非常确定此时代码中的表已经创建，或者还没有？

Answer 1

问题是由于您使用

tbl.cells[k]

- HTML TableElement 没有

cells

属性。

您可以通过在创建单元格时设置单元格的文本来解决您的问题，并消除对 2 个单独循环的需要：

function generateTable() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");
  tbl.setAttribute("border", "2");
  let cellCounter = 0;

  for (let i = 0; i < 2; i++) {
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell nr. ${cellCounter}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
      cellCounter++;
    }

    tblBody.appendChild(row);
  }

  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

generateTable();

顺便说明一下，border

元素

的<table>属性已被弃用，不应使用。请使用 CSS 来设置表格样式。

Answer 2

你会更明智地使用与表专门相关的 JS 方法...
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

更少的错误和更少的代码...

（并且使用css也更好...）

let counter = 0;

const
  tbl     = document.body.appendChild( document.createElement('table')) // Creates  and insert the table element
, tblBody = tbl.createTBody() // Creates and insert the table body element
  ;
for (let i = 0; i < 2; i++)
  {
  const row = tblBody.insertRow();    // creates  and insert table row
  for (let j = 0; j < 2; j++)
    {
    row.insertCell().textContent = `row: ${i}, cell: ${j}, counter: ${++counter}`; // cells...
    } 
  }

table {
  border-collapse  : separate;  /* no need to use borders on cells */
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  font-size        : .8rem;
  }
table td {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 3.2em;
  text-align       : center;
  }