求助：使用JavaScript循环创建8×8 HTML表格的代码修复及解释

我来帮你一步步排查代码里的问题，搞定这个8×8表格的生成～

首先，你的代码没法运行主要有两个核心错误，先给你修正后的可运行版本，再逐个解释问题：

<table border="1"> <!-- 加border是为了直观看到表格边框，方便调试 -->
<script>
// 外层循环：生成8行
for (var i = 0; i < 8; i++) { 
  document.write("<tr>"); // 开启一行
  // 内层循环：每行生成8个单元格
  for (var j = 0; j < 8; j++) { 
    document.write("<td>&nbsp;</td>"); // &nbsp;让单元格有内容高度，避免看不到格子
  }
  document.write("</tr>"); // 闭合当前行
}
</script>
</table>

原代码的错误分析 #

1. for循环语法完全写错了
   JavaScript里for循环的正确结构是：for(变量初始化; 循环条件; 变量增量)
   你写的for (var i; i = 0; i < 8; i++)有两个问题：

   • 初始化部分没给i赋值，反而把赋值操作i=0放在了条件判断的位置。i=0是赋值语句，它的返回值是0，在布尔判断里会被视为false，所以循环直接不会执行。
   • 循环条件和增量的位置也搞反了，正确的写法应该是for (var i = 0; i < 8; i++)：先把i初始化为0，只要i小于8就继续循环，每次循环结束后i加1（这样刚好执行8次，对应8行）。
     内层循环的j也是同样的问题，必须按照正确的for循环结构来写。

2. 表格标签闭合错误
   你最后写的document.write("<tr>")是创建新的行标签，但实际上这里应该写document.write("</tr>")来闭合当前行，否则浏览器会因为标签不匹配而无法正确渲染表格结构。

额外的优化说明 #

• 给<table>加border="1"：默认情况下表格没有边框，加这个属性能让你立刻看到生成的8×8格子效果。
• 在<td>里加 ：空的<td>因为没有内容，高度会变成0，看不到格子，加一个非换行空格可以让单元格保持正常的高度和宽度。

更现代的写法（可选了解） #

虽然document.write能解决问题，但在现代前端开发里更推荐用DOM操作的方式（不会覆盖页面内容，更灵活），给你简单示例：

<table id="chessboard" border="1"></table>
<script>
// 获取页面上的表格元素
const table = document.getElementById('chessboard');
// 生成8行
for (let i = 0; i < 8; i++) {
  // 创建一行元素
  const row = document.createElement('tr');
  // 生成每行的8个单元格
  for (let j = 0; j < 8; j++) {
    // 创建单元格元素
    const cell = document.createElement('td');
    // 给单元格加内容，避免为空
    cell.innerHTML = '&nbsp;';
    // 把单元格添加到当前行
    row.appendChild(cell);
  }
  // 把行添加到表格里
  table.appendChild(row);
}
</script>

这种方式是先创建DOM元素，再把它们添加到页面中，不会像document.write那样在页面加载完成后调用会清空整个页面，而且逻辑更清晰。

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