如何将输入字段（文本框）添加到使用 jQuery 动态创建的表中答案

【问题标题】：How do i add input fields (textbox) to a table dynamically created with jQuery如何将输入字段（文本框）添加到使用 jQuery 动态创建的表中
【发布时间】：2011-08-03 20:52:12
【问题描述】：

我一直在使用 Javascript 来了解如何动态创建文本框和动态表格。我想出了如何创建文本框和表格，但我不知道如何将这些合并在一起，以便动态创建的表格包含带有我首选参数的文本框。

我有这个 jQuery 脚本，它可以动态地将行和单元格添加到表中。我在一个名为“元素”的输入字段中指定表格应该有多少行

HTML：

<input type="text" name="element" id="element" />
    <input type="button" value="Tilføj" id="add" />
    <br />

    <span id="MCQ-textbox">&nbsp;
        <table id="tbl" border="1">
            <tbody>
            </tbody>
        </table>
    </span>

脚本：

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

我不想在每一列中添加文本“单元格”，而是添加文本框。

第一列应具有以下属性：

var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_number");
    element.setAttribute("name", "MCQ["+i+"].choice_number");

第二列应具有以下属性：

 var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_wording");
    element.setAttribute("name", "MCQ["+i+"].choice_wording");

第三列应该有以下属性：

    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__help_text");
    element.setAttribute("name", "MCQ["+i+"].help_text");

我如何合并它，以便我的表格包含带有上述参数的文本框？

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这将起作用：http://jsfiddle.net/RrhT9/

此外，您可以按照自己的方式向单元格添加内容，但您必须替换 .text("<input.../>") .html("<input.../>)

【讨论】：

这个答案卡在另一个网站上。

【解决方案2】：

您可以执行以下操作：

var cellText = "<input type="text" id=\"MCQ_"+i+"__choice_number\" name=\"MCQ["+i+"].choice_wording\"/>";

然后为您创建的每个输入框进行相应的更改。

【讨论】：

您确定它的格式正确吗：“
试试这样：var cellText = '<input type="text" id="MCQ_'+i+'__choice_number" name="MCQ['+i+'].choice_wording" />';