如何将JavaScript Sudoku Grid数组值填充到HTML表格td元素中

首先确保你的HTML表格是标准9×9结构，给表格设置id方便获取：

<table id="sudoku-table">
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

接下来用JavaScript完成填充逻辑：

// 调用你的生成函数获取合法数独网格
const sudokuGrid = generateSudoku();

// 获取表格元素
const sudokuTable = document.getElementById('sudoku-table');
// 获取表格的所有行
const tableRows = sudokuTable.querySelectorAll('tr');

// 遍历数独网格的每一行
for (let rowIndex = 0; rowIndex < sudokuGrid.length; rowIndex++) {
  // 获取当前表格行的所有单元格
  const rowCells = tableRows[rowIndex].querySelectorAll('td');
  // 遍历当前行的每个数字，填充到对应单元格
  for (let colIndex = 0; colIndex < sudokuGrid[rowIndex].length; colIndex++) {
    rowCells[colIndex].textContent = sudokuGrid[rowIndex][colIndex];
    
    // 可选：如果数独包含空格（用0表示），可以隐藏0并标记可编辑
    // if (sudokuGrid[rowIndex][colIndex] === 0) {
    //   rowCells[colIndex].textContent = '';
    //   rowCells[colIndex].contentEditable = true;
    // } else {
    //   rowCells[colIndex].classList.add('fixed-number');
    //   rowCells[colIndex].contentEditable = false;
    // }
  }
}

常见问题排查 #

• 确认generateSudoku()返回的是9×9的二维数组，每个元素为1-9的数字（或0表示空格）
• 检查HTML表格的行数和列数严格为9行9列，无多余或缺失的<tr>/<td>
• 确保代码在DOM加载完成后执行，可包裹在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', () => {
  // 填充逻辑代码放在这里
});

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