javascript - 使用jQuery动态添加表行和列

我正在尝试使用用户输入值将行和列添加到表中，以使用jQuery动态确定行和列的数量。下面是我的代码，它实际上添加行和列，但不根据用户的输入

function makeGrid() {
let numOfRow = 0; let numOfCol = 0;

$('#submit').on('click', function() {

    numOfRow = $('#height').val();
    numOfCol = $('#width').val();

    for (var i = 1; i <= numOfRow; i++) {
        let row = $('.grid-canvas').append('<tr>');
        for (col = 1; col <= numOfCol; col++) {
            $('tr').append('<td></td>');
        }
    }
});
}

makeGrid();

假设用户输入numOfRow = 2并且numOfCol = 2，我应该有一个像这样的表

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>

问题是我的代码似乎增加了额外的内容，但我无法弄清楚。这是我的代码的结果

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</tbody>

如何修复我的代码？

最佳答案

尝试从以下位置更改代码：

$('#submit').on('click', function() {

numOfRow = $('#height').val();
numOfCol = $('#width').val();

for (var i = 1; i <= numOfRow; i++) {
    let row = $('.grid-canvas').append('<tr>');
    for (col = 1; col <= numOfCol; col++) {
        $('tr').append('<td></td>');
    }
}
});

进入这个

$('#submit').on('click', function() {

numOfRow = $('#height').val();
numOfCol = $('#width').val();
var body = $('.grid-canvas');
for (var i = 1; i <= numOfRow; i++) {
  let row = $('<tr></tr>');
  for (col = 1; col <= numOfCol; col++) {
    row.append('<td></td>');
  }
  body.append(row);
}
});

我在上面的代码中所做的操作是为表的主体创建一个单独的对象，然后用列创建行后，便将它们附加回表对象。