如何用JavaScript嵌套循环创建表格并将中间列设为X而非0

嘿，我来帮你搞定这个表格需求！你的基础代码已经搭好了表格框架，只需要加个简单的判断逻辑，就能把中间列的内容换成X而非0。

修改后的完整代码 #

<div id="container"></div>

<script>
var table = document.createElement('table'), tr, td, row, cell; 
for (row = 0; row < 3; row++) { 
  tr = document.createElement('tr'); 
  for (cell = 0; cell < 3; cell++) { 
    td = document.createElement('td'); 
    tr.appendChild(td); 
    // 关键判断：中间列（索引为1）设为X，其余为0
    td.innerHTML = cell === 1 ? 'X' : 0;
  } 
  table.appendChild(tr); 
} 
document.getElementById('container').appendChild(table);

// 可选优化：给表格加边框，方便查看效果
table.style.borderCollapse = 'collapse';
table.querySelectorAll('td').forEach(td => {
  td.style.border = '1px solid #000';
  td.style.padding = '8px 12px';
  td.style.textAlign = 'center';
});
</script>

关键改动说明 #

• 核心逻辑调整：在设置td.innerHTML时，增加了三元判断cell === 1 ? 'X' : 0。因为3列的单元格索引是0、1、2，索引1对应的就是中间列，循环到这一列时就把内容设为X，其他列保持0。
• DOM顺序优化：我把<div id="container"></div>移到了脚本前面，这样脚本执行时能确保找到这个容器元素，避免出现找不到DOM节点的问题（原代码里容器在脚本后，虽然现代浏览器大多能兼容，但前置更稳妥）。
• 视觉优化：额外加了一点CSS样式，默认创建的表格没有边框，看起来不够直观，加边框和内边距后能清晰看到行列结构。

如果你的需求其实是把中间单元格（第二行第二列，即row=1且cell=1）设为X，只需要把判断条件改成row === 1 && cell === 1 ? 'X' : 0就行，调整起来非常简单。

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