1

我在用 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>

如何在 <tr>-elements 中设置 <td>-elements？

解决方案（感谢 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));
  }
}
4

2 回答 2

3

你想做这样的事情：

var $row = $('<tr/>');
for(..) {
   $row.append($('<td/>')...);
}
$pt.append($row);
于 2013-03-27T13:14:05.160 回答
1

我认为这是一种更好的方法：

function createPuzzleTable () {
    // Create table with id
    var $pt = '<table id="puzzletable">';

    // For-loop to create rows
    for (var y=0; y<4; y++) {
         // For-loop to create cells, text-method is only for test numbering cells

        $pt += '<tr>';

        for (var x=0; x<4; x++) {
            $pt += '<td>';
            //add content to TD here
            $pt += '</td>';
        }

        $pt += '</tr>';
    }

    $pt += '</table>';
    $('#gameArea').append($pt);
}

使用此方法意味着您只需在已将表格的 HTML 设置为字符串之后操作 DOM 一次。

于 2013-03-27T13:15:06.487 回答