JS渲染二维数组彩色格子时仅显示十进制数该如何解决

云上老周

2026-9-29

问题修正&解决方案

原有代码核心问题

二维数组元素被赋值为基础数字类型，无法追加className属性，属于类型错误
取色器取值方法错误，你通过getElementsByClassName获取元素集合，实际应该通过id获取取色器的选中颜色值
生成单元格时未绑定背景色配置，反而将随机数直接填充到了单元格内容中
多次调整尺寸时旧表格没有被清理，会出现多个表格堆叠的问题

修正后代码

可选补充CSS（用于规范格子显示效果）

#board table td {
  width: 20px;
  height: 20px;
  border: 1px solid #eee;
}

修正后JS代码

let adjustSize = document.getElementById("dimension");
const board = document.querySelector("#board");

adjustSize.addEventListener("change", function () {
  let size = parseInt(adjustSize.value);
  // 先清空旧表格
  board.innerHTML = "";
  // 提前获取两个取色器的选中颜色值
  const popXColor = document.getElementById("popXcolor").value;
  const popYColor = document.getElementById("popYcolor").value;
  
  var array = [];
  for (let i = 0; i < size; i++) {
    array[i] = [];
    for (let j = 0; j < size; j++) {
      // 数组存储对应格子的颜色即可
      array[i][j] = Math.random() < 0.5 ? popXColor : popYColor;
    }
  }
  drawTable(array);
});

function drawTable(array) {
  let t = document.createElement("table");
  for (let i = 0; i < array.length; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < array[i].length; j++) {
      let td = document.createElement("td");
      // 给单元格设置背景色，不需要填内容可以留空
      td.style.backgroundColor = array[i][j];
      tr.appendChild(td);
    }
    t.appendChild(tr);
  }
  board.appendChild(t);
  return t;
}