Javascript 动态添加td和tr onclick HTML JQUERY

我有一张有一排和两个TDs的桌子

<table id="tbTest">
    <tr>
        <td>
            <input type="text">
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

我还有一个按钮，可以动态添加带有td的新行。如果第二次单击，我想添加第二个td。如果第三次被点击，我想添加一个新的tr和一个td…等等

点击jquery

var counter = 2;

if ((counter % 2) == 0) {
    row = $('<tr><td><input type="text"/></td></tr>');
}
else {
    //???????????????
}
row.appendTo('#tbTest');
counter++;

var计数器=2；
如果（（计数器%2）==0）{
行=$（''）；
}
否则{
//???????????????
}
第行。附录（“#tbTest”）；
计数器++；

我可以添加tr和td（第一次单击），但第二次单击时如何在tr中插入第二个td。。。建议

谢谢，

$（文档）.ready（函数（$）{
$(document).ready(function ($) {
    var i = 0;
    $("button").click(function () {
        if (i % 2 != 0) {
            row = $('<td><input type="text"/></td>');
            row.appendTo('#tbTest tr:last-child');
        } else {
            row = $('<tr><td><input type="text"/></td></tr>');
            row.appendTo('#tbTest');
        }
        i++
    })
})

var i=0；
$（“按钮”）。单击（函数（）{
如果（i%2！=0）{
行=$（''）；
第行附录（“#tbTest tr:最后一个孩子”）；
}否则{
行=$（''）；
第行。附录（“#tbTest”）；
}
我++
})
})

这里有一把小提琴：

$（文档）.ready（函数（$）{
var i=0；
$（“按钮”）。单击（函数（）{
如果（i%2！=0）{
行=$（''）；
第行附录（“#tbTest tr:最后一个孩子”）；
}否则{
行=$（''）；
第行。附录（“#tbTest”）；
}
我++
})
})

---

这里有一把小提琴：

像这样的东西可以：

var container = $('#tbTest tr:last');
if(container.find('td').length > 1)
{
    $('#tbTest').append('<tr></tr>');
     container = $('#tbTest tr:last');
}
$(container).append('<td><input type="text"/></td>');

var容器=$（'tbTest tr:last'）；
if（container.find（'td'）。长度>1）
{
$（'#tbTest'）。附加（''）；
容器=$（'tbTest tr:last'）；
}
$（容器）。附加（“”）；

---

我不确定此代码是否100%正确，但基本上您需要检查最后一个

tr

元素是否包含多个

td

，如果包含，请创建一个新的元素。

类似的操作：

var container = $('#tbTest tr:last');
if(container.find('td').length > 1)
{
    $('#tbTest').append('<tr></tr>');
     container = $('#tbTest tr:last');
}
$(container).append('<td><input type="text"/></td>');

var容器=$（'tbTest tr:last'）；
if（container.find（'td'）。长度>1）
{
$（'#tbTest'）。附加（''）；
容器=$（'tbTest tr:last'）；
}
$（容器）。附加（“”）；

---

我不确定此代码是否100%正确，但基本上您需要检查最后一个

tr

元素是否包含多个

td

，如果包含，请创建一个新的。

根据您的问题，我猜您想要实现的是在首次单击按钮时以及每隔奇数次添加一行包含表数据的新行（第三次、第五次等）并在第二次和每隔偶数次（第四次、第六次等）单击按钮时向创建的行添加新表数据

var计数器=0，
一行
$（“按钮”）。单击（函数（）{
计数器+++；//增加计数器的值
//对于每一次奇数时间，单击
如果（计数器%2！=0）{
行=$（“”）；//创建行
$（'#tbTest'）。追加（行）；
}
否则{
//创建一个数据表
var tableData=$（''）；
row.append（tableData）；//将表数据追加到上次创建的行中
}
});

---

这是一个有用的工具：

从您的问题来看，我想您想要实现的是在第一次单击按钮时，每隔奇数次（第三次、第五次等）添加一个包含表格数据的新行，以及在第二次单击按钮时，每隔偶数次，向创建的行添加一个新表格数据（第四次、第六次等）

var计数器=0，
一行
$（“按钮”）。单击（函数（）{
计数器+++；//增加计数器的值
//对于每一次奇数时间，单击
如果（计数器%2！=0）{
行=$（“”）；//创建行
$（'#tbTest'）。追加（行）；
}
否则{
//创建一个数据表
var tableData=$（''）；
row.append（tableData）；//将表数据追加到上次创建的行中
}
});

---

这是一个有用的小提琴：

我只需计算最后一行中有多少个

td

s。如果已经有两个，请添加一个新行。我只需计算最后一行中有多少个

td

s。如果已经有两个，请添加一个新行。很有效。谢谢。我理解“$（'#tbTest'）。追加（行）；”将行添加到表中。与：“row.append（tableData）；”将tableData追加到row是变量的行中？它如何知道追加到行中？变量“row”是对包含该行的已创建jQuery对象的引用。'row.append（tableData）'只需将一个表数据附加到存储在变量'row'中的已创建行。我希望这会有所帮助。请向上投票我的答案.Works。谢谢。我理解“$（'#tbTest'）。append（row）；”将行添加到表中。混淆为：“row.append（tableData）；“将tableData追加到行是变量的行中？它如何知道追加到行中？变量'row'是对包含该行的已创建jQuery对象的引用。'row.append（tableData）'只是将表数据追加到存储在变量'row'中的已创建行中。我希望这有帮助。请支持我的答案。”。