Question

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

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

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>

我想添加文本框，而不是将文本“cell”添加到每一列。

第一列应具有以下属性：

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

如何合并这个，以便我的表格保存带有上述参数的文本框？

谢谢！

Answer 1

您可以执行以下操作：

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

然后相应地更改您正在创建的每个输入框。

Answer 2

这将有效：http://jsfiddle.net/RrhT9/

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

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

2 个答案: