javascript克隆元素樹並更改克隆中的所有ID

我創建了一個按鈕，允許您克隆元素樹。這是我的代碼：javascript克隆元素樹並更改克隆中的所有ID

function add_party(number) { 
    var n = number.replace("party", ""); 
    var newparty = document.getElementById("party"+n); 
    var div = document.createElement("div"); 
    var con = document.getElementById("party1").innerHTML; 
    document.createElement("div"); 
    div.id = 'party' + ++n; 
    div.innerHTML = con; 
    newparty.parentNode.insertBefore(div, newparty.nextSibling); 
    renumberDivs(div, n, "div","party"); 
    }

這是我的HTML：

<div id="party1"> 
    <h1>Party 1</h1> 
    <table> 
    <tbody> 
     <tr> 
     <th>party name：</th> 
     <td><input type="text" name="name1" value="some name"></td> 
    </tr> 
    <tr> 
     <th>party time：</th> 
     <td><input type="text" name="time1" value="some time"></td> 
    </tr> 
    </tbody> 
    </table> 
    <input type="button" onclick="add_party(this.parentNode.id)" value="add party"> 
    </div>

然而，由於每個元素都有一個唯一的ID或名稱克隆不應該有相同的ID或名稱。相反，新的編號和名稱應當由1加起來那麼克隆樹應該是這樣的：

<div id="party2"> 
    <h1>Party 2</h1> 
    <table> 
    <tbody> 
     <tr> 
     <th>party name：</th> 
     <td><input type="text" name="name2" value=""></td> 
    </tr> 
    <tr> 
     <th>party time：</th> 
     <td><input type="text" name="time2" value=""></td> 
    </tr> 
    </tbody> 
    </table> 
    <input type="button" onclick="add_party(this.parentNode.id)" value="add party"> 
    </div>

此外，輸入值應該是空的克隆。我怎樣才能做到這一點與JavaScript？（請不要jQuery）。

謝謝。

編輯：

此代碼更新計數數字，所以他們總是出現在順序：

function renumberDivs(el, n, tagn, ass) { 
    while (el = el.nextSibling) { 
    if (el.tagName && el.tagName.toLowerCase() == tagn){ 
     el.id = ass + ++n; 
    } 
    } 
    }

來源

2014-12-04 Cain Nuke

一般情況下，這種解決方案有2個步驟：

操作現有各方逐一從上到插入點。
將新方插入插入點。

function add_party(divId) { 
 
    var party = document.getElementById(divId); 
 
    var newParty = party.cloneNode(true); 
 
    var allParties = document.querySelectorAll('div[id^="party"]'); 
 
    var newId = parseInt(divId.replace('party', ''), 10) + 1; 
 

 
    for(var i = allParties.length-1; i > newId-2; i--) { 
 
     allParties[i].setAttribute('id', 'party' + (i+2)); 
 
     allParties[i].querySelector('h1').innerHTML = 'Party ' + (i+2); 
 
     var partyInputs = allParties[i].querySelectorAll('input[type="text"]'); 
 
     for(var j = 0; j < partyInputs.length; j++) { 
 
      var prefix = partyInputs[j].getAttribute("name").replace(/\d+/, ""); 
 
      partyInputs[j].setAttribute("name", prefix + (i+2)); 
 
     } 
 
    } 
 

 
    newParty.setAttribute('id', 'party' + newId); 
 
    newParty.querySelector('h1').innerHTML = 'Party ' + newId; 
 
    var inputs = newParty.querySelectorAll('input[type="text"]'); 
 
    for(var i = 0; i < inputs.length; i++) { 
 
     var prefix = inputs[i].getAttribute("name").replace(/\d+/, ""); 
 
     inputs[i].setAttribute("name", prefix + newId); 
 
     inputs[i].setAttribute("value", ""); 
 
     inputs[i].value = ""; 
 
    } 
 

 
    party.parentNode.insertBefore(newParty, party.nextSibling); 
 
}

<div id="party1"> 
 
    <h1>Party 1</h1> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <th>party name：</th> 
 
       <td><input type="text" name="name1" value="some name"></td> 
 
      </tr> 
 
      <tr> 
 
       <th>party time：</th> 
 
       <td><input type="text" name="time1" value="some time"></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    <input type="button" onclick="add_party(this.parentNode.id)" value="add party"> 
 
</div>

來源

2014-12-04 07:53:56 Leo

我們幾乎沒有，但仍存在2個問題：首先，新黨應該出現正下方的一個與被按下的按鈕（我原來的代碼不說），其次，既然我們在老派之間有了新的派對，那麼統計數字就不會匹配。我將代碼添加到我的問題中，將舊數字更新爲新數字。不過，我不能找到一種方法來結合我的代碼。 – 2014-12-05 03:31:14

@CainNuke說，你點擊添加按鈕，現在你有1和2.然後你點擊添加按鈕1，你想插入1和2之間的一方，並且你想新添加爲2，並且原始2變成這是你想要的嗎？ – Leo 2014-12-05 03:36:24

@CainNuke答案更新後，看看它是你想要的？ – Leo 2014-12-05 04:22:55

你使用addEventListener更好地附着事件元素。我發現它很有趣。請參閱DEMO...，但是有一個問題，對於新生成的表單，沒有附加事件處理程序，因此應該爲新生成的表單附加新的事件處理程序。如果你可以使用jQuery或其他一些人，你可以使用函數像Delegate其結合事件處理程序自動

來源

2014-12-04 07:20:10 Jesse

javascript克隆元素樹並更改克隆中的所有ID

回答

相關問題