Question

我要求包含一个重复的TextArea控件（我创建了一个小的jquery片段，它将克隆第一个textarea并将其附加到ul上按下一个按钮，因此我将其称为重复文本区域控件）重复DIV部分（用户将看到另一个添加按钮，当点击该按钮时，它应该克隆div并将该div添加到主容器。用户可以根据需要多次点击按钮，因此我将其称为重复DIV）。

我不知道完成这项任务。这是详细的要求。（它类似于InfoPath中重复部分内的重复字段）

使用Jquery我创建了一个重复的textarea控件（TextAreas在按下Add按钮时添加为列表项），现在我将有一个div，需要有一些文本框，还需要包含这个重复的textarea字段。 ID也需要独一无二。如上所述，在div之后会有一个按钮，当用户点击该按钮时，需要克隆整个div并需要将其附加到主容器中。

Answer 1

有很多不同的方法可以做到这一点。我最近有一个项目，我必须做这件事。 Here is a working Fiddle以下代码示例：

HTML

<div id="container">
    <span id="sholder"></span>
    <br />
    <input type="button" value="Add Section" class="addsection" />
</div>


<div id="section_template" class="template">
    <div class="section">
        <span class="taholder"></span>
        <br />
        <input type="button" value="Add Textarea" class="addtextarea" />
    </div>
</div>

这里的关键概念是我创建了一个div部分，其中包含课程template，而在CSS template中设置为display: none;。我稍后在CreateSection()函数中使用它来更轻松地创建更大的HTML部分。

jQuery / javascript

$(function() {
    //add the click handler to add a new section
    $("input.addsection").click(CreateSection);

    //add the click handler for the new section
    //since the buttons are added dynamically, use "on" on the "document" element
    // with the selector for the button we want to watch for.
    $(document).on("click", "input.addtextarea", function() {
        var section = $(this).closest("div.section");
        AddTextarea(section);
    });
});

function CreateSection() {
    var section = $("#section_template div.section").clone();
    var holder = $("#container span#sholder");

    //get the current total number of sections
    var sectionCount = holder.find("div.section").length;

    //create the section id by incrementing the section count
    section.attr("id", "section" + (sectionCount + 1));

    //add a textarea to the section
    AddTextarea(section);

    //add the new section to the document
    holder.append(section);
}

function AddTextarea(section) {
    var sectionID = section.attr("id");
    var holder = section.find("span.taholder");

    //get the current total number of textareas in this section
    var taCount = holder.find("textarea").length;

    //create the new textarea element
    var ta = $(document.createElement("textarea"));

    //create the textarea unique id
    var taID = section.attr("id") + "_textarea" + (taCount + 1);
    ta.attr("id", taID);

    //show the id... can be removed
    ta.val("ID: " + taID);

    //add the textarea to the section
    holder.append(ta);
}

上述代码中有几个有用的搜索功能：closest，find。另外，我使用clone函数复制该HTML部分。

另外值得注意的是，我使用textarea创建了新的$(document.createElement("textarea"))。 document.createElement是fastest way for JS to create new HTML DOM objects。

示例中的一些CSS

div.template {
    display: none;
}

div.section {
    border: 1px solid black;
}

div.section textarea {
    display: block;
}

此示例保持ID唯一，如您在JSFiddle中看到的那样。但是，如果将这些字段发布到服务器上，则读取这些字段是另一个问题的答案。

使用Jquery在重复节内重复字段

1 个答案: