Question

我创建了一个按钮，允许您克隆元素树。这是我的代码：

   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或名称。相反，新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;
     }
    }
   }

Answer 1

通常，此解决方案分为两步：

从最后一个到插入点逐个操作现有的各方。
将新方插入插入点。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您最好使用addEventListener将事件附加到元素。我发现它很有趣。请参考DEMO...，但有一个问题，对于新生成的表单，没有附加事件处理程序，因此您应该为新生成的表单附加新的事件处理程序。如果你可以使用jQuery或其他一些，你可以使用像Delegate这样自动绑定事件处理程序的函数

javascript克隆元素树并更改克隆中的所有ID

2 个答案: