Javascript 当使用for循环动态构造表时，我的表正在添加一个额外的行

因此，我用javascript/jquery制作了一个像素艺术制作工具，用户可以在其中选择网格大小并选择颜色。网格应该是通过表格中的tr元素相互重叠的完美正方形。在创建每一个新行之后，底部和顶部的行之间都有一个间隙，开发人员工具显示添加了一个额外的tr元素

以下是JSFIDLE：

//定义颜色选择器id和大小选择器id的变量
让colorPicker=document.getElementById（'colorPicker'）；
设sizePicker=$（“#sizePicker”）；
addEventListener（“更改”，watchColorPicker，false）；
函数watchColorPicker（事件）{
document.querySelectorAll（'tr'）.forEach（函数（tr））{
tr.style.color=event.target.value；
});
}
//调用makeGrid函数的大小选择器事件处理程序
sizePicker.submit（'单击'，函数（））{
event.preventDefault（）；
makeGrid（）；
});
//将单击的td项目的背景色设置为
挑选出来的
$（'pixel_canvas'）。在（'click'，'td'，function（）上{
$（this.css（'backgroundColor'，colorPicker.value）；
});
//创建接受用户输入值的函数
//定义网格的大小
函数makeGrid（）{
设gridHeight=$（“#输入_高度”）.val（）；
设gridWidth=$（'#input_width'）.val（）；
让gridTable=$（'pixel#u canvas'）；
让gridBody=''；
for（设i=0；i

原因是在

网格体

变量中添加

元素之前要关闭

元素。下面是您如何解决此问题的方法-

for (let i = 0; i < gridHeight; i++) {
    gridBody += '<tr>';
    for (let j = 0; j < gridWidth; j++) {
        gridBody += '<td></td>';
        gridBody += gridWidth[i] + gridHeight[j];
    }
    gridBody += '</tr>';
}

for（设i=0；i

---

这里的工作小提琴-

gridBody+=gridWidth[i]+gridHeight[j]

aka

#####

for (let i = 0; i < gridHeight; i++) {
    gridBody += '<tr>';
    for (let j = 0; j < gridWidth; j++) {
        gridBody += '<td></td>';
        gridBody += gridWidth[i] + gridHeight[j];
    }
    gridBody += '</tr>';
}