Javascript 根据循环变量的值为特定HTML表块着色时出现问题

/*注意矩阵的列是俄罗斯方块的行，反之亦然，
所以在这个矩阵中从左到右-->和从上到下是一样的
在实际的俄罗斯方块板中垫底*/
变量a=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
];
//生成给定范围之间的随机整数
函数getRandomInteger（最小值、最大值）{
返回Math.round（Math.random（）*（max-min））+min；
}
函数getColor（）{
//一系列的红色、蓝色、绿色、黄色、橙色、紫色和鲑鱼色
var colorArray=[“#C0392B”、“#2980B9”、“#27AE60”、“#F1C40F”、“#E67E22”、“#8E44AD”、“#FFA07A”]
返回colorArray[getRandomInteger（0,7）]；
}
//在顶部创建一组随机块
函数createBlocks（）{
var i=getRandomInteger（0,9）；
blockHeight=getRandomInteger（2,4）；
var blockColor=getColor（）；
对于（var j=0；j现在，在每次迭代中，您将向传递给类型
n的编号添加10：

nthBoxToColor = i + 10 * j + 1;

因此，在第一次迭代中，如果选择器是

td:nth-of-type(9)

然后在第二次迭代中，选择器将

td:nth-of-type(19)

但是在一个TR中只有10个TDs，因此选择器失败

虽然您可以先选择第一个TR，然后对其调用
querySelector
，以获得正确的TD：

  for (var j = 0; j < blockHeight; j++) {
    a[i][j] = 1;
    nthBoxToColor = i + 1;
    const tr = document.querySelector(`tr:nth-child(${j + 1})`);
    tr.querySelector(`td:nth-of-type(${nthBoxToColor})`).style.backgroundColor = blockColor;
  }

然后，在循环内部：

tbody.children[j].children[i].style.backgroundColor = blockColor;


/*注意矩阵的列是俄罗斯方块的行，反之亦然，
所以在这个矩阵中从左到右-->和从上到下是一样的
在实际的俄罗斯方块板中垫底*/
变量a=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
//生成给定范围之间的随机整数
函数getRandomInteger（最小值、最大值）{
返回Math.round（Math.random（）*（max-min））+min；
}
函数getColor（）{
//一系列的红色、蓝色、绿色、黄色、橙色、紫色和鲑鱼色
var colorArray=[“#C0392B”、“#2980B9”、“#27AE60”、“#F1C40F”、“#E67E22”、“#8E44AD”、“#FFA07A”]
返回colorArray[getRandomInteger（0,7）]；
}
//在顶部创建一组随机块
函数createBlocks（）{
var i=getRandomInteger（0,9）；
blockHeight=getRandomInteger（2,4）；
var blockColor=getColor（）；
const tbody=document.querySelector（'.table>tbody'）；
对于（var j=0；j

gameContainer{
左边距：10vw；
宽度：80vw；
背景颜色：蓝色；
}
俄罗斯方块委员会{
左边距：30vw；
宽度：20vw；
}
运输署{
高度：2vw；
}

tbody.children[j].children[i].style.backgroundColor = blockColor;