javascript 如何将输入字段（文本框）添加到使用 jQuery 动态创建的表中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6926129/
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
How do i add input fields (textbox) to a table dynamically created with jQuery
提问by Nanek
I have been playing with Javascript to find out how i can dynamically create textboxes and a dynamic table. I figured out how to create the textboxes and the table, but i dont know how to merge theese together, so that the dynamically created table holds the textboxes with my preferred parameters.
我一直在玩 Javascript 以了解如何动态创建文本框和动态表。我想出了如何创建文本框和表格，但我不知道如何将这些合并在一起，以便动态创建的表格保存带有我首选参数的文本框。
I have this jQuery script which dynamically adds rows and cells to a table. I specify how many rows the table should have in an input field called "element"
我有这个 jQuery 脚本，它动态地将行和单元格添加到表中。我在名为“元素”的输入字段中指定表应该有多少行
The HTML:
HTML：
<input type="text" name="element" id="element" />
<input type="button" value="Tilf?j" id="add" />
<br />
<span id="MCQ-textbox">
<table id="tbl" border="1">
<tbody>
</tbody>
</table>
</span>
The scripts:
脚本：
<scripts language="javascript">
function createDynamicTable()
{
var tbody = $("#tbl");
var rows = $('#element').val();
var number_of_columns = 3;
if (tbody == null || tbody.length < 1) return;
var tfirstrow = $("<tr>");
$("<th>")
.addClass("tableCell")
.text("#")
// .data("col")
.appendTo(tfirstrow);
$("<th>")
.addClass("tableCell")
.text("Svarmulighed")
// .data("col")
.appendTo(tfirstrow);
$("<th>")
.addClass("tableCell")
.text("Hj?lpetekst")
// .data("col")
.appendTo(tfirstrow);
tfirstrow.appendTo(tbody);
for (var i = 0; i < rows; i++) {
var trow = $("<tr>");
for (var c = 0; c < number_of_columns; c++)
{
var cellText = "Cell"
$("<td>")
.addClass("tableCell")
.text(cellText)
.data("col", c)
.appendTo(trow);
}
trow.appendTo(tbody);
}
}
$(document).ready(function () {
$('#add').click(function () {
createDynamicTable();
});
});
</SCRIPT>
Instead of adding the text "cell" to each column, i would like to add textboxes.
我想添加文本框，而不是将文本“单元格”添加到每一列。
The first column should have the following attributes:
第一列应具有以下属性：
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "MCQ_"+i+"__choice_number");
element.setAttribute("name", "MCQ["+i+"].choice_number");
the second column should have the following attributes:
第二列应具有以下属性：
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "MCQ_"+i+"__choice_wording");
element.setAttribute("name", "MCQ["+i+"].choice_wording");
and the third column should have the following attributes:
第三列应具有以下属性：
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "MCQ_"+i+"__help_text");
element.setAttribute("name", "MCQ["+i+"].help_text");
How do i merge this, so that my table holds the textboxes with the parameters above?
我如何合并它，以便我的表格包含带有上述参数的文本框？
Thanks!
谢谢！
采纳答案by dcastro
This will work: http://jsfiddle.net/RrhT9/
这将起作用：http: //jsfiddle.net/RrhT9/
Also, you could have added content to the cell your way, but you'd have to replace .text("<input.../>")with .html("<input.../>)
此外，您可以按照自己的方式向单元格添加内容，但您必须替换.text("<input.../>")为.html("<input.../>)
回答by lamelas
You can do the following:
您可以执行以下操作：
var cellText = "<input type="text" id=\"MCQ_"+i+"__choice_number\" name=\"MCQ["+i+"].choice_wording\"/>";
And then change accordingly for each of the input boxes you're creating.
然后对您创建的每个输入框进行相应的更改。
