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

我有一个小问题，用jQuery创建表。这是我迄今为止所做的。如何用jQuery创建空的4x4表？

的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>

如何设置< TD内<TR> -elements > -elements？

在此先感谢。

Sollution（感谢保罗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)); 
    } 
}

来源

2013-03-27 Mikko Kirkanen

'alert'应该被弃用。：| – hjpotter92 2013-03-27 13:09:46

'$ row.children（）。append（...）'应该是'$ row.append（...）'就像你对行所做的一样。 – 2013-03-27 13:10:53

@Dream复活节：'警报'只用于测试。 @Felix克林：如果我删除'儿童（）'元素，则结构是这样 ......所以它不会解决问题。 – 2013-03-27 13:37:55

你想要做这样的事情：

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

来源

2013-03-27 13:14:05

谢谢！这有助于我理解更好的jQuery逻辑。我的代码将-element放入表中。 – 2013-03-27 13:52:09

我认为这是这样做的更好的办法：

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); 
}

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

来源

2013-03-27 13:15:06 Bill

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

回答

相关问题