Javascript 动态表在html和jquery中打印错误的行和列

我试图在我的网站上动态生成一个表，但它给了我错误的行（宽度）和列（高度）

对于

row=1

和

column=4

的输入，它生成一个包含两行的表格，其中一行包含5列，另一行包含4列

$（“#sizePicker”）.submit（函数（事件）{
var height=event.currentTarget[0]。值，
宽度=事件。当前目标[1]。值；
控制台。原木（高度+宽度+宽度）；
对于（变量i=0；i

网格高度：
网格宽度：
之所以发生这种情况，是因为您将
td
附加到
表中的每个
tr

这是错误的

下面是一个工作示例


$（“#sizePicker”）.submit（函数（事件）{
变量表=$（“#像素画布”），
高度=事件。当前目标[0]。值，
宽度=事件。当前目标[1]。值；
原木（“高度：+高度+”，宽度：+宽度）；
表格.html（“”）；
对于（变量i=0；i

网格高度：
网格宽度：
根据您的逻辑，
td
继续在每个
tr
中添加循环。因此，您需要将
td
附加到
tr
表中的
tr
中。下面是一个工作示例


$（函数（）{
$（“#单击”）。在（'click'，函数（事件）{
变量高度=$（'#inputhweight'）.val（）；
变量宽度=$（'#inputWeight'）.val（）；
var html=''；
对于（var i=0；i而言，问题是因为您将一个新的
td
附加到表中存在的每个
tr
，即使是在以前的迭代中创建的

您可以通过基于输入值中指定的范围创建包含
td
和
tr
元素的数组来修复此问题并改进逻辑。类似如下：


$（“#sizePicker”）.submit（函数（e）{
e、 预防默认值（）；
var height=parseInt（$（'#inputHeight'）.val（），10）；
var-width=parseInt（$（'#inputWeight'）.val（），10）；
var columns=新数组（宽度）.fill（“”）.join（“”）；
var rows=新数组（高度）.fill（`${columns}`）；
$（'#pixelCanvas'）.html（rows.join（''）；
})；
表{
利润率：10px；
}
表td{
填充：5px20px；
边框：1px实心#CCC；
}

网格高度：

网格宽度：

我在您的脚本中发现了错误，提交函数应该是这样的：

$("#sizePicker").submit(function(event) {
 height = parseInt(event.currentTarget[0].value),
 width = parseInt(event.currentTarget[1].value);

 console.log(height + "width" + width);

 for (var i = 0; i < height; i++) 
 {

  if(height>0)
  {
    let tr = $('<tr></tr>');
    for (j = 0; j < width; j++) 
    {
     tr.append("<td></td>");
    }
    $('#pixelCanvas').append(tr);
  }
 }

 event.preventDefault();
});

$（“#sizePicker”）.submit（函数（事件）{
高度=parseInt（event.currentTarget[0].value），
宽度=parseInt（event.currentTarget[1].value）；
控制台。原木（高度+宽度+宽度）；
对于（变量i=0；i0）
{
设tr=$（''）；
对于（j=0；j
我认为它只引用了当前tr，因为它在for循环中，但我猜Jquery会查看所有元素。谢谢！我还看到你在1次提交后隐藏了sizepicker。有什么方法可以删除用户新输入的旧表吗？@Glen我更改了，再试一次now@GlenjQuery选择器，例如
$（“.class”）
的工作方式与css相同。因此
$（“tr”）
将引用页面上的所有
tr
。这使得tr和td元素分开，而不是父元素child@Glen你是对的，我将答案更新为有效的解决方案