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>

根据用户输入将行插入表中

1 个答案: