Javascript 如何添加新的<；td>；到n<；tr>；使用jquery？

我尝试使用嵌套循环动态创建tic-tac趾板，我得到了很多：

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

//使用jquery填充网格
对于（i=0；i<3；i++）{
//添加一行
$（“#网格”）。追加（“”）；
//3行3列
对于（var j=0；j<3；j++）{
//写入单元
$（“#网格”）.append（”）.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>

---

如何将

添加到正确的

中？

尝试一下这样的方法

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

（i=0；i<3；i++）的

{
//添加一行
var tr=$（''）；
//3行3列
对于（var j=0；j<3；j++）{
td=$（''）；
td.文本（（（i*3）+j）+1）；
//写入单元
tr.append（td）；
}
$（'网格'）.append（tr）；
}

---

工作小提琴：

试试这样的东西

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

（i=0；i<3；i++）的

{
//添加一行
var tr=$（''）；
//3行3列
对于（var j=0；j<3；j++）{
td=$（''）；
td.文本（（（i*3）+j）+1）；
//写入单元
tr.append（td）；
}
$（'网格'）.append（tr）；
}

---

工作小提琴：

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

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

//使用jquery填充网格
对于（变量i=0；i<3；i++）{
//添加一行
变量行=$（“”）；
$（“#网格”）。追加（行）；
//3行3列
对于（var j=0；j<3；j++）{
//写入单元
变量单元格=$（“”）。数据（“id”，i*3+j）；
行。追加（单元格）；
}
}

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

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

//使用jquery填充网格
对于（变量i=0；i<3；i++）{
//添加一行
变量行=$（“”）；
$（“#网格”）。追加（行）；
//3行3列
对于（var j=0；j<3；j++）{
//写入单元
变量单元格=$（“”）。数据（“id”，i*3+j）；
行。追加（单元格）；
}
}

用于（i=0；i<3；i++）{
var html=''；
对于（var j=0；j<3；j++）{
html+=''
}
$（“#网格”）.append（“+html+”）；
}

产生：

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

用于（i=0；i<3；i++）{
var html=''；
对于（var j=0；j<3；j++）{
html+=''
}
$（“#网格”）.append（“+html+”）；
}

产生：

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

---

您可以通过两种方式实现它

首先，只需对代码进行编辑

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

（i=0；i<3；i++）的

{
//添加一行
$（“#网格”）。追加（“”）；
//3行3列
对于（var j=0；j<3；j++）{
var td=$（“”）。数据（“id”，i*3+j）；
$（“#网格”），查找（“tr:eq（“+i+”））。追加（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);
}

（i=0；i<3；i++）的

{
//创建行并将其存储在变量中
var tr=$（''）；
对于（var j=0；j<3；j++）{
tr.append（“”）数据（“id”，i*3+j）；
}
$（'网格'）.append（tr）；
}

您可以通过两种方式实现它

首先，只需对代码进行编辑

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

（i=0；i<3；i++）的

{
//添加一行
$（“#网格”）。追加（“”）；
//3行3列
对于（var j=0；j<3；j++）{
var td=$（“”）。数据（“id”，i*3+j）；
$（“#网格”），查找（“tr:eq（“+i+”））。追加（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);
}

（i=0；i<3；i++）的

{
//创建行并将其存储在变量中
var tr=$（''）；
对于（var j=0；j<3；j++）{
tr.append（“”）数据（“id”，i*3+j）；
}
$（'网格'）.append（tr）；
}

将数据设置为行而不是单元格。将数据设置为行而不是单元格。