jquery - 如何使用 jQuery 创建空的 4x4 表？

Question

我在使用 jQuery 创建表时遇到了一些问题。这是我到目前为止所做的事情。

jQuery:

function createPuzzleTable () {
  // Create table with id
  $pt = $('<table>').attr('id','puzzleTable');

  // For-loop to create rows
  for (var y=0; y<4; y++) {
    var $row = $pt.append($('<tr>'));
    // For-loop to create cells, text-method is only for test numbering cells
    for (var x=0; x<4; x++) {
      $row.children().append($('<td>').text(y*4+x+1));
    }
  }
  // Alert to show structure of table
  alert ($pt.prop('outerHTML'));

  // Fetch gameArea by id and add table.
  $('#gameArea').append($pt);
}

警报(已清除):

<table id="puzzleTable">
  <tbody>
    <tr></tr><td>1</td><td>2</td><td>3</td><td>4</td>
    <tr></tr><td>5</td><td>6</td><td>7</td><td>8</td>
    <tr></tr><td>9</td><td>10</td><td>11</td><td>12</td>
    <tr></tr><td>13</td><td>14</td><td>15</td><td>16</td>
  </tbody>
</table>

如何在-元素内设置-元素？

<小时/>

解决方案(感谢 Paolo Bergantino):

for (var y=0; y<4; y++) {
  var $row = $('<tr>');
  $pt.append($row);
  for (var x=0; x<4; x++) {
    $row.append($('<td>').text(y*4+x+1));
  }
}

Answer 1

你想做这样的事情:

var $row = $('<tr/>');
for(..) {
   $row.append($('<td/>')...);
}
$pt.append($row);