使用 JavaScript 将 2 个 TD 元素添加到表中

Question

我的网页上有一个表格，我希望使用 JavaScript 对其进行更改。我的主要目标是将 2 个 TD 添加到新行。不知何故，运行我的代码后会插入一个新行，但所有数据都在 TD 上，为什么？var table2 = document.getElementById("testsPieArea");var rowCounter = table2.rows.length;var i;for (i = 0; i < 2; i++) {  var row = table2.insertRow(rowCounter);  var cell1 = row.insertCell(0);  var cellData = "<tr>";  cellData += "<td> Info1 </td><td> Info2 </td></tr>";  cell1.innerHTML = cellData;  rowCounter++;}在现实生活中，会看到创建了 2 行，但其中写入了“info1info2”，这不是我所要求的。

Answer 1

cell1（由 创建HTMLTableRowElement.insertCell()）引用单元格 ( td )，而不是row。您应该插入行：

row.innerHTML = cellData;

var table2 = document.getElementById("testsPieArea");

var rowCounter = table2.rows.length;

for (var i = 0; i < 2; i++) {

  var row = table2.insertRow(rowCounter);

  var cellData = "<tr><td> Info1 </td><td> Info2 </td></tr>";

  row.innerHTML = cellData;

  rowCounter++;

}

table, td {

  border: 1px solid black;

}

<table id="testsPieArea"></table>

Answer 2

如果要添加具有两个值的新行，您可以创建元素并设置它们，然后textContent再将它们添加为子元素。

insertRow(document.querySelector('#my-table'), [ 'A', 'B' ]);

function insertRow(table, data) {

  let tbody = table.querySelector('tbody'),

      tr = document.createElement('tr');

  data.forEach(value => {

    let td = document.createElement('td');

    td.textContent = value;

    tr.appendChild(td);

  });

  tbody.appendChild(tr);

}

table {

  border-collapse: collapse;

}

table,

th,

td {

  border: thin solid grey;

}

th,

td {

  text-align: center;

  padding: 0.25em;

}

<table id="my-table">

  <thead>

    <tr>

      <th>Col 1</th>

      <th>Col 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Row 1, Col 1</td>

      <td>Row 1, Col 2</td>

    </tr>

  </tbody>

</table>