HTML与jQuery动态生成表格时行列显示异常问题求助

嘿，我来帮你搞定这个表格行列显示错误的问题～

你遇到的核心问题是jQuery的append()方法会自动帮你闭合HTML标签，导致你的代码逻辑和实际DOM操作完全不符，才出现了多余的行和单元格。

具体哪里错了？ #

当你写$('#pixelCanvas').append("<tr>");时，jQuery并不会插入一个半开的<tr>标签等着你后续补全，而是直接生成一个完整的<tr></tr>空行插到表格里。之后你执行$('tr').append("<td></td>");，会给页面上所有的<tr>（包括刚才生成的空行）添加单元格；最后那句$('#pixelCanvas').append("</tr>");更坑，浏览器会把这个孤立的闭合标签解析成一个新的空行，这就导致了输入1行4列却出现2行、单元格数量不对的情况。

另外还有两个小细节需要修正：

• 变量j没加var声明，会变成全局变量，搞不好以后会引发其他奇怪问题
• 你获取的height和width是字符串类型，虽然JS会自动转，但显式转成数字更稳妥，避免循环逻辑出意外

修复后的完整代码 #

JavaScript部分：

$("#sizePicker").submit(function(event) {
  // 每次提交先清空旧表格，避免多次提交叠加内容
  $('#pixelCanvas').empty();
  
  // 把输入值转成数字，确保循环次数正确
  var height = Number(event.currentTarget[0].value);
  var width = Number(event.currentTarget[1].value);
  
  for (var i = 0; i < height; i++) {
    // 先创建一个单独的tr元素
    var $newRow = $("<tr></tr>");
    for (var j = 0; j < width; j++) {
      // 只给当前创建的这一行加单元格，不是所有行
      $newRow.append("<td></td>");
    }
    // 把组装好的整行加到表格里
    $('#pixelCanvas').append($newRow);
  }
  event.preventDefault();
});

HTML部分（修正了一个拼写错误：inputWeight改成inputWidth，和name属性对应，以后用ID取值也不会错）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sizePicker">
  Grid Height: <input type="number" id="inputHeight" name="height" min="1" value="1">
  Grid Width: <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">
</table>

为什么这样改就对了？ #

1. 先组装行再添加：先创建单个<tr>对象，在这个对象内部把所有<td>加好，最后再把整行插到表格里，彻底避开了标签自动闭合的坑
2. 清空旧内容：每次提交表单前清空表格，防止多次提交后旧的表格内容和新内容叠加
3. 规范变量使用：给j加了var声明，把输入值转成数字，保证循环逻辑稳定不出错
4. 修正拼写问题：把ID里的Weight改成Width，和名称属性保持一致，后续维护更方便

现在你再输入row=1、column=4，就能得到正确的1行4列表格啦～

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