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

Answer 2

您可以通过两种方式实施

首先只是编辑代码。

 for ( i = 0 ; i < 3 ; i++ ) {

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

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

           var td = $("<td>").data("id", i * 3 + j );
            $("#grid"),find("tr:eq("+i+")").append(td);
        }
    }

其次，使用变量来存储TR

for ( i = 0 ; i < 3 ; i++ ) {

        //create row and store that in variable
    var tr = $('<tr>');


    for ( var j = 0 ; j < 3 ; j++ ) {


        tr.append("<td>").data("id", i * 3 + j );
    }

    $('#grid').append(tr);
}

Answer 3

尝试这样的东西。

for ( i = 0 ; i < 3 ; i++ ) {

        //add a row
    var tr = $('<tr>');

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

        td = $('<td>');
        td.text(((i*3) + j) + 1);

            //write cell
        tr.append(td);
    }

    $('#grid').append(tr);
}

工作小提琴：http://jsfiddle.net/6SU86/

Answer 4

for (i = 0; i < 3; i++) {
    var html='';
    for (var j = 0; j < 3; j++) {
        html += '<td data-id=' + i * 3 + j + '></td>'
    }
    $("#grid").append("<tr>" + html + "</tr>");
}

<强> jsFiddle example

产地：

<table id="grid">
    <tbody>
        <tr>
            <td data-id="00"></td>
            <td data-id="01"></td>
            <td data-id="02"></td>
        </tr>
        <tr>
            <td data-id="30"></td>
            <td data-id="31"></td>
            <td data-id="32"></td>
        </tr>
        <tr>
            <td data-id="60"></td>
            <td data-id="61"></td>
            <td data-id="62"></td>
        </tr>
    </tbody>
</table>

如何使用jquery向nth添加新内容？

4 个答案: