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/>
        }
    }
}

而且您不需要提交按钮。

Answer 2

您应该将高度和宽度作为参数传递，因为它们不在同一范围内。

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(height ,width);
});

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

应该有用。

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

2 个答案: