使用 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) {&nbsp; let tbody = table.querySelector('tbody'),&nbsp; &nbsp; &nbsp; tr = document.createElement('tr');&nbsp; data.forEach(value => {&nbsp; &nbsp; let td = document.createElement('td');&nbsp; &nbsp; td.textContent = value;&nbsp; &nbsp; tr.appendChild(td);&nbsp; });&nbsp; tbody.appendChild(tr);}table {&nbsp; border-collapse: collapse;}table,th,td {&nbsp; border: thin solid grey;}th,td {&nbsp; text-align: center;&nbsp; padding: 0.25em;}<table id="my-table">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Col 1</th>&nbsp; &nbsp; &nbsp; <th>Col 2</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Row 1, Col 1</td>&nbsp; &nbsp; &nbsp; <td>Row 1, Col 2</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>