使用按鈕點擊添加新的字段集元素

Question

JavaScript是否有任何方式通過單擊按鈕來生成字段集中的所有元素？下面的代碼顯示了字段集中的兩個文本框和一個textarea。當我按下「添加項目按鈕」時，我想在該字段集內生成相同的文本框和textarea。

非常感謝您的幫助。

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

Just在按鈕單擊事件中調用函數「添加」。需要計數器以避免具有多於一個元素的相同ID。

現場測試案例：http://jsfiddle.net/yahavbr/eW6j4/

Answer 2

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

嘗試這樣的事情，克隆（）是有用的 http://api.jquery.com/clone/

-edited您comment- 後添加到您的htmlpage：-edited後

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

再次您的評論 -

I爲了讓這個功能在新增的輸入上工作，我們使用'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> 

如果代碼工作，請註明該答案爲「接受的答案」，以便其他用戶同樣的問題馬上就可以看到運行的代碼。

Answer 3

我喜歡的JavaScript方式

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

問候:)