JS生成HTML表格异常：所有单元格仅排列在一列的问题排查

嘿，刚学JS没几天就动手实践，真的超棒！你遇到的这个问题，核心原因是浏览器会自动补全不完整的HTML标签，咱们来一步步拆解：

问题根源 #

当你用document.getElementById("cont").innerHTML += '<tr>'这种方式拼接HTML时，浏览器会立刻把不闭合的<tr>补全成<tr></tr>——因为HTML要求所有标签必须正确闭合才能正常解析。这样一来，后面循环生成的<td>就没法被包含在<tr>里面，只能被浏览器当成独立的元素处理，最后所有单元格就都挤在了一列（其实是每个单元格都被自动包裹成了单独的行，看起来像一列）。

两种解决办法 #

方法1：先拼接完整HTML字符串，一次性赋值 #

先把整个表格的HTML内容都拼在一个字符串里，最后再一次性设置给innerHTML，这样浏览器就不会提前补全标签，能正确识别<tr>和<td>的嵌套关系：

function start () {
  var size = document.getElementById('test5').value;
  document.getElementById('start').style.display = 'none';
  // 初始化空字符串用来拼接表格内容
  let tableContent = '';
  for (var y = 0; y < size; y++) {
    tableContent += '<tr>';
    for (var x = 0; x < size ; x++) {
      // 这里可以自定义单元格内容，比如加上坐标标识
      tableContent += `<td>单元格 ${y+1}-${x+1}</td>`;
    }
    // 别忘了闭合当前行的<tr>
    tableContent += '</tr>';
  }
  // 一次性把完整的表格内容赋值给容器
  document.getElementById("cont").innerHTML = tableContent;
}

方法2：用DOM API直接创建元素（更规范） #

直接通过JS创建DOM节点，手动管理元素的嵌套关系，完全避免标签补全的问题，适合复杂的DOM操作场景：

function start () {
  var size = document.getElementById('test5').value;
  document.getElementById('start').style.display = 'none';
  const tableContainer = document.getElementById("cont");
  for (var y = 0; y < size; y++) {
    // 创建<tr>元素
    const row = document.createElement('tr');
    for (var x = 0; x < size ; x++) {
      // 创建<td>元素并设置内容
      const cell = document.createElement('td');
      cell.textContent = `单元格 ${y+1}-${x+1}`;
      // 把单元格添加到当前行
      row.appendChild(cell);
    }
    // 把当前行添加到表格容器
    tableContainer.appendChild(row);
  }
}

额外提醒 #

还要确保你的容器是<table>标签哦！<tr>必须放在<table>或者<tbody>内部才能被正确渲染成表格行，如果你的容器是<div id="cont">，那就算代码对了，浏览器也会把<tr>当成普通块级元素处理，依然会布局错乱。正确的HTML结构应该是：

<!-- 用table作为容器 -->
<table id="cont"></table>

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