javascript - 根据用户输入向表中插入行

Question

我尝试使用 javascript 生成行，但我正在学习 jquery，我希望使用它来实现此功能。

HTML

<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>
<table id="pixel_canvas"></table>

JAVASCRIPT/JQUERY

function makeGrid() {
   var table = document.getElementById("pixel_canvas");
   //var table = $('#pixel_canvas');
   table.innerHTML = "";

   while($('#pixel_canvas tr').length > 0)
       table.deleteRow(0);
       var inputHeight = $('#input_height').val();
       var inputWidth = $('#input_width').val();
  for(var i = 0; i < inputHeight; i++){
       var row = table.insertRow(i);
       for(var j = 0; j < inputWidth; j++){
           var cell = row.insertCell(j);
       } 
   }
   return false;
}
sizePicker.submit(function(evt){
    evt.preventDefault();
    makeGrid();
});

这里，如果我使用 jquery 实现相同的方法，则表 DOM 方法(例如 insertRow() 和 insertCell())将处于非事件状态。

var table = $('#pixel_canvas');
  var row = table.insertRow(i); // The browser responses not a function 

Answer 1

insertRow 是 Javascript DOM 函数。因此，使用 JQuery 您必须获取 DOM 元素而不是 jquery 对象。使用 $('#pixel_canvas').get(0) 获取 DOM 元素。

function makeGrid() {
   var table = $('#pixel_canvas').get(0);
   table.innerHTML = "";

   while($('#pixel_canvas tr').length > 0)
       table.deleteRow(0);
       
    var inputHeight = $('#input_height').val();
    var inputWidth = $('#input_width').val();
    
    for(var i = 0; i < inputHeight; i++){
         var row = table.insertRow(i);
         for(var j = 0; j < inputWidth; j++){
             var cell = row.insertCell(j);
         } 
     }
   return false;
}

$('#sizePicker').submit(function(evt){
    evt.preventDefault();
    makeGrid();
});

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

<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="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>
<table id="pixel_canvas"></table>