克隆空表格字段

我仍在嘗試創建用戶可以隨時添加的空白字段。我試圖克隆下面的隱藏模板，但我無法得到它添加。克隆空表格字段

我的HTML

<div class="_100"> 
    <fieldset id="FieldBlank"> 
    <div id="readroot" class="hidden"> 

    <div class="_100"> 
    <div class="_50"> QA Sample ID:<input type="text" id="QASampleID" name="QASampleID"></div> 
    <div class="_50" data-role="controlgroup" data-mini="true" data-type="horizontal"> 
     <label>Collection Method</label><br /> 
     <input type="radio" id="radGrab1" value="Grab" name="Collection1" /> 
     <label for="radGrab1">Grab</label> 
     <input type="radio" id="radEWI1" value="EWI" name="Collection1" /> 
     <label for="radEWI1">EWI</label></div> 
    </div> 

    <div class="_100"> 
    <div class="_40">  
    <label class="analysis-label" for="analysis">Analyte:</label> 
    <select class="analysis" id="analysis" name="analysis" data-iconpos="left" data-icon="grid"> 
     <option>Select</option> 
     <option value = "TN">TN</option> 
     <option value = "TP,NO2+3">TP,NO2+3</option> 
    </select></div> 
    <div class="_30"> 
    <label class="preserve-label" for="preserve">Preserved</label> 
     <select class="select_preserve" id="preserve" name="preserve" data-iconpos="left" data-icon="grid"> 
     <option>Select</option> 
     <option value = "HNO3">HNO&#8323;</option> 
     <option value = "H2SO4">H&#8322;SO&#8324;</option> 
     </select></div> 
    <div class="_30"> 
     <label class="cool-label" for="cool">Cooled</label> 
     <select class="select_cool" id="cool" name="cool" data-iconpos="left" data-icon="grid"> 
     <option>Select</option> 
     <option value = "Ice">Ice</option> 
     <option value = "Frozen">Frozen</option> 
     <option value = "None">None</option> 
     </select></div> 
    </div> 

    </div>     
    </fieldset> 
</div> 
    <button type="button" data-theme="b" data-icon="plus" id="moreFields" onclick="moreFields()">ADD FIELD BLANK</button> 

<hr /><div id="writeroot"> </div>

我的JavaScript

var counter = 0; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes; 
    for (var i = 0; i < newField.length; i++) { 
     var theName = newField[i].name 
     if (theName) 
      newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
}

我只是無法得到它的工作！是否因爲這個腳本不是jQuery？它似乎並不是因爲它被隱藏，因爲當我取消隱藏時，按鈕仍然無法添加克隆？我現在正在拉我的頭髮。我需要你幫忙！

來源

2013-12-11 pja

你用jQuery標記了這個問題，但我看不到任何東西。 – j08691

如果你真的使用jQuery，你可以使用http://api.jquery.com/clone/但確保你指定它是一個深層克隆。只是一個註釋 - 不要用_開始一個類名，有些瀏覽器不喜歡這個。 –

沒有id爲「writeroot」的元素，只是這個

它會工作 – bitkot

你有沒有嘗試過這樣的：

$("#readroot input").clone().appendTo("body"); // Or wherever you want to append them to

而且，是的，不要手動隱藏的東西。改用jQuery的切換功能：

$("#readroot").toggle(); // Or hide()

來源

2013-12-11 16:35:22 ecruz

我試過隱藏/顯示，但它只能工作一次，我需要的能力添加多個空格 – pja

現在我想到了，你並不需要克隆任何東西;你做？你爲什麼不使用$（'＃writeroot'）。append（$（''））;根據需要創建新的輸入？ – ecruz

這也行不通:-( – pja

克隆空表格字段

回答

相關問題