使用JavaScript向表格添加2个TD元素时数据合并问题求助

嘿，我来帮你搞定这个问题！你的代码之所以会出现所有数据挤在同一个<td>里的情况，核心原因是你错误地把完整的<tr>结构塞进了单个<td>元素中，浏览器解析这种不符合规范的HTML时，会自动修正结构，最终导致两个<td>的内容被合并到同一个单元格里。

错误原因拆解 #

你看这段代码：

var cell1 = row.insertCell(0);
var cellData = "<tr>";
cellData += "<td> Info1 </td><td> Info2 </td></tr>";
cell1.innerHTML = cellData;

你先通过insertRow创建了一个新的<tr>，接着又在这个行里插入了一个<td>（cell1），然后把包含另一个<tr>和两个<td>的HTML赋值给cell1的innerHTML。浏览器会把这个嵌套的<tr>当成单元格内的普通内容处理，最终解析成混乱的结构，自然就出现了内容挤在一起的情况。

两种正确的实现方式 #

方式1：用DOM方法逐个创建单元格

这种方式更符合原生DOM操作的规范，适合需要对单元格做更多自定义操作的场景：

var table2 = document.getElementById("testsPieArea");
var rowCounter = table2.rows.length;
for (var i = 0; i < 2; i++) {
  // 创建新行
  var row = table2.insertRow(rowCounter);
  // 创建第一个单元格并设置内容
  var cell1 = row.insertCell(0);
  cell1.textContent = "Info1"; // 如果需要HTML内容可以用innerHTML
  // 创建第二个单元格并设置内容
  var cell2 = row.insertCell(1);
  cell2.textContent = "Info2";
  rowCounter++;
}

方式2：直接给新行设置innerHTML（更简洁）

如果不需要对单个单元格做复杂操作，直接给新行的innerHTML赋值包含两个<td>的内容即可：

var table2 = document.getElementById("testsPieArea");
var rowCounter = table2.rows.length;
for (var i = 0; i < 2; i++) {
  var row = table2.insertRow(rowCounter);
  // 直接给行添加两个td元素
  row.innerHTML = "<td> Info1 </td><td> Info2 </td>";
  rowCounter++;
}

这两种方式都能正确生成包含两个独立<td>的新行，解决你遇到的问题~

内容的提问来源于stack exchange，提问作者Tal Angel