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

Question

我正在尝试使用用户输入值将行和列添加到表中，以使用 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>

如何修复我的代码？

Answer 1

尝试更改您的代码:

$('#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);
}
});

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