javascript - 如何使用 jQuery 创建基于 HTML 输入的动态 NxM 表？

Question

我正在尝试使用 HTML 接收高度和宽度值。有了这些值，我希望使用 jQuery 动态创建一个表。我似乎无法显示表格。以下是代码的相关部分:

var color, height, width;// Select color input
var row, cell;
color = $('#colorPicker').val();

$('#sizePicker').on('click', function(e){
  e.preventDefault();
  height = $("#input_height").val();
  width = $('#input_width').val();
  makeGrid();
});

function makeGrid() {
  for(var h=0; h < height; h++){
    $("#pixel_canvas").append("<tr id='row'></tr>");
    for(var w=0; w < width; w++){
      $("#row").append("<td>Sample text</td>")
    }
  }
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

  <form id="sizePicker">
        Grid Height:
        <input type="number" id="input_height" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="input_width" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixel_canvas"></table>

每当我单击 HTML 按钮上的“提交”时，浏览器 URL 都会更新为准确的数值，但页面不显示任何内容。我还使用 HTML 手动编写了该表。我看到它显示了，所以我知道我的 CSS 应该不会有问题。任何建议表示赞赏。谢谢。

Answer 1

为了使 id 有用，它们必须是唯一的。

重复<tr id='row'>导致无法通过 id 可靠地选择表行，但幸运的是您不需要这样做。

相反，请在 JavaScript 中保留对附加行的引用。

$('#sizePicker input').on('change', function(e){
    e.preventDefault();
    var height = +$("#input_height").val();
    var width = +$('#input_width').val();
    makeGrid(width, height);
});

function makeGrid(width, height) {
    var $row;
    for(var h=0; h < height; h++) {
        $row = $("<tr/>").appendTo('#pixel_canvas'); // <<< assign reference to the appended <tr/>
        for(var w=0; w < width; w++) {
            $row.append("<td>Sample text</td>"); // <<< use reference to the appended <tr/>
        }
    }
}

而且您不需要提交按钮。