javascript - 动态表格在html和jquery中打印错误的行和列

我试图在我的网站上动态生成一个表，但它给了我错误的行（宽）和列（高）
对于row=1和column=4的输入，它生成一个包含2行的表，其中1行包含5列，另一行包含4列

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

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

  for (var i = 0; i < height; i++) {
    console.log(i);
    $('#pixelCanvas').append("<tr>");
    for (j = 0; j < width; j++) {
      console.log(j);
      $('tr').append("<td></td>");
    }
    $('#pixelCanvas').append("</tr>");
  }
  event.preventDefault();
});

<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="inputWeight" name="width" min="1" value="1">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>

最佳答案

它之所以发生，是因为您将td附加到tr中的每个table中。
这是错误的
这是一个有效的例子

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

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

  table.html("");

  for (var i = 0; i < height; i++) {
    table.append("<tr class='row" + i  +"'></tr>");

    for (j = 0; j < width; j++) {
      $("tr.row" + i).append("<td>" + i + j + "</td>");
    }

  }

  event.preventDefault();
});

<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="4"> Grid Width:
  <input type="number" id="inputWeight" name="width" min="1" value="5">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>

关于javascript - 动态表格在html和jquery中打印错误的行和列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50289792/