javascript - 如何使用 jquery 将新的 附加到第 n 个 ？

Question

我试图使用嵌套循环动态创建一个井字游戏板，我得到了这么多:

    //fill grid using jquery
for ( i = 0 ; i < 3 ; i++ ) {

        //add a row
    $("#grid").append("<tr>");

        //3 rows, 3 columns 
    for ( var j = 0 ; j < 3 ; j++ ) {

            //write cell
        $("#grid").append("<td>").data("id", i * 3 + j );
    }
}

但是这会生成以下 html:

<table id="grid">

    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

</table>

我如何附加 <td>以便将它们添加到正确的 <tr> 中？

Answer 1

您必须将单元格添加到行中，而不是直接添加到表格中:

//fill grid using jquery
for (var i = 0; i < 3; i++) {

  //add a row
  var row = $("<tr>");
  $("#grid").append(row);

  //3 rows, 3 columns 
  for (var j = 0; j < 3; j++) {

    //write cell
    var cell = $("<td>").data("id", i * 3 + j);
    row.append(cell);
  }
}