如何用jQuery根据用户输入动态生成指定行列数的表格？

嘿，我来帮你搞定这个表格生成的小bug！你遇到的问题其实很典型——每次添加单元格的时候，你选中了页面上所有的<tr>元素，导致之前创建的行也被重复添加单元格，所以才会出现第一行列数超标的情况。

问题根源 #

你代码里的$('tr').append('<td></td>')这行，每次循环都会选中页面上所有已存在的<tr>，包括上一次循环创建的行。比如生成第2行时，第一行也会被追加2个<td>，最终第一行就有4个单元格了。

修复方案 #

我们需要确保每个单元格只添加到当前刚创建的那一行里，同时还要处理重复点击提交按钮时的表格叠加问题，具体调整如下：

1. 创建新行时，把这个新行的jQuery对象存到变量里，后续只给这个变量对应的行添加单元格
2. 每次点击提交前，先清空表格里已有的行，避免重复生成
3. 给col变量加上let声明，避免全局变量污染
4. 可选：把获取的输入值转成数字，避免字符串带来的潜在问题

修正后的代码 #

function makeGrid() {
  $('#submit').on('click', function() {
    // 先清空已有表格内容，避免重复叠加
    $('.grid-canvas').empty();
    
    // 获取输入值并转为数字
    let numOfRow = parseInt($('#height').val());
    let numOfCol = parseInt($('#width').val());

    for (let i = 1; i <= numOfRow; i++) {
      // 创建新行并保存为jQuery对象
      let $row = $('<tr></tr>');
      // 把新行添加到表格
      $('.grid-canvas').append($row);
      
      // 给当前行添加单元格
      for (let col = 1; col <= numOfCol; col++) {
        $row.append('<td></td>');
      }
    }
  });
}
makeGrid();

这样修改后，不管你输入多少行多少列，每个行都会只生成对应的单元格数量，而且每次点击提交都会先清空旧表格，不会出现叠加的情况啦！

内容的提问来源于stack exchange，提问作者Mena