javascript 动态添加 td 和 tr onclick HTML JQUERY
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23985429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add td and tr onclick HTML JQUERY
提问by Benk
I have a table with a row and two TDs
我有一张桌子，有一行和两个 TD
<table id="tbTest">
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
I also have a button that adds a new row with a td dynamically. If the second time is clicked I want to add a second td. if the third time is clicked I want to add a new tr with one td...etc
我还有一个按钮，可以动态添加带有 td 的新行。如果第二次被点击，我想添加第二个 td。如果第三次点击我想添加一个新的 tr 和一个 td ......等
jquery on click
jquery点击
var counter = 2;
if ((counter % 2) == 0) {
row = $('<tr><td><input type="text"/></td></tr>');
}
else {
//???????????????
}
row.appendTo('#tbTest');
counter++;
I can add a tr and td (first time clicked) but the second time clicked how do I insert a second td in a tr... suggestions?
我可以添加 tr 和 td（第一次点击）但第二次点击如何在 tr 中插入第二个 td... 建议？
thanks,
谢谢，
回答by Akinkunle Allen
From your question, I guess what you want to achieve is to add a new row with table data when the button is first clicked and every other odd time (third time, fifth time etc) and to add a new table data to the created row when the button is clicked a second time and every other even time (fourth time, sixth time etc)
从你的问题来看，我猜你想要实现的是在第一次点击按钮时添加一个带有表格数据的新行，每隔一段时间（第三次，第五次等）添加一个新的表格数据到创建的行当第二次点击按钮时，每隔偶数次（第四次，第六次等）
var counter = 0,
row;
$('button').click(function() {
counter++; //increase value of counter
//for every odd time click
if (counter % 2 != 0) {
row = $('<tr><td><input type="text"></td></tr>'); //create row
$('#tbTest').append(row);
}
else {
//create a table data
var tableData = $('<td><input type="text"></td>');
row.append(tableData); //append the table data to the last created row
}
});
Here is a working fiddle: http://jsfiddle.net/976PT/
这是一个工作小提琴：http: //jsfiddle.net/976PT/
回答by Akinkunle Allen
Something like this would work:
像这样的事情会起作用：
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>');
I'm not sure if this code is 100% correct, but basically you need to check if the last trelement contains more than one td, and if it does, create a new one.
我不确定这段代码是否 100% 正确，但基本上您需要检查最后一个tr元素是否包含多个td，如果是，则创建一个新元素。
回答by Ortix92
$(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++
})
})
Here is a fiddle: http://jsfiddle.net/aK73x/5/
这是一个小提琴：http: //jsfiddle.net/aK73x/5/
