通过单击按钮添加新的字段集元素

Question

JavaScript 有什么方法可以通过单击按钮生成字段集中的所有元素？下面的代码显示了一个字段集中的两个文本框和一个文本区域。当我按下“添加项目按钮”时，我想在该字段集中生成相同的文本框和文本区域。

非常感谢您的帮助。

<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<p>Item                     <input type ="text" size="25"   name="prof_item" /><br /></p>
<p>Duration                 <input type ="text" size="25"   name="prof_duration" /><br /></p>
<p>Enlargement              <label for="enlargement"></label><p></p>
                            <textarea name="textarea" cols="71" rows="5" id="prof_enlargement">
</textarea></p>
<p><input type="submit" name="Submit" value="Add new item" id="add_prof" /></p>
</fieldset>

Answer 1

您可以克隆它们。首先用父 div 包装这些元素，例如“模板”：

<div id="template">
  <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
  <p>Duration <input type ="text" size="25" name="prof_duration" /><br /></p>
  <p>Enlargement <label for="enlargement"></label></p>
   <p><textarea name="prof_enlargement" cols="71" rows="5" id=""></textarea></p>
</div>

第二个占位符将包含您添加的所有克隆：

<div id="placeholder">
  <div id="template">
     <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
     ...
   </div>
</div>

最后这段 JS 代码会在其中添加元素：

var _counter = 0;
function Add() {
    _counter++;
    var oClone = document.getElementById("template").cloneNode(true);
    oClone.id += (_counter + "");
    document.getElementById("placeholder").appendChild(oClone);
}

只需在按钮单击事件中调用“添加”函数即可。计数器需要避免多个元素具有相同的 ID。

现场测试用例：http://jsfiddle.net/yahavbr/eW6j4/

Answer 2

我更喜欢javascript方式

var fieldset= document.getElementById('fieldset');
var fieldParent = fieldset.parentNode;
var newFieldSet = document.createElement('fieldset');
newFieldSet.innerHTML = fieldset.innerHTML;
fieldParent.appendChild(newFieldSet);

问候:)

Answer 3

$('#button').click(function() {
    $('#fieldset').clone().insertAfter($('#fieldset'));
});

试试这样的，Clone() 很有用 http://api.jquery.com/clone/

-在您的评论后编辑- 将此添加到您的 htmlpage：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#add_prof').click(function() {
            $('#fieldset').clone().insertAfter($('#fieldset'));
    });
});
</script>

-在您发表评论后再次编辑-

为了让函数也能处理新添加的输入，我们使用“live”。我建议的 .click 在执行代码时对元素起作用。当我们使用 .live 时，该函数将与您选择的每个现有元素一起执行，但也与您选择的未来元素一起执行。使用这个：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('fieldset input').live('click',function() {
            $(this).parent('fieldset').clone().insertAfter($(this).parent('fieldset'));
    });
});
</script>

如果代码有效，请将此答案标记为“接受的答案”，以便其他有相同问题的用户可以立即看到有效的代码。