在使用javascript克隆時更改字段集元素的名稱

我有一個要求，即必須在窗體中添加現有字段集的副本。我能夠成功實現克隆過程。但我無法更改字段元素的名稱和ID。它與第一個字段集相同，但我希望它具有不同的名稱和ID來區分它（即使在最後添加數字也沒關係）。以下是我的js和fieldset。在使用javascript克隆時更改字段集元素的名稱

<div id="placeholder"> 
<div id="template"> 
<fieldset id="fieldset"> 
<legend id="legend">Professional development</legend> 
<p>Item      <input type ="text" size="25" name="prof_itemDYNID" id ="prof_item_id"/><br /></p> 
<p>Duration     <input type ="text" size="25" name="prof_durationDYNID" id="prof_duration_id" /><br /></p> 
<p>Enlargement    <label for="enlargement"></label><p></p> 
          <textarea name="textareaDYNID" cols="71" rows="5" id="prof_enlargement"> 
</textarea></p> 
<p><input type="button" value="Add new item" id="add_prof" onclick="Add();" /></p> 
</fieldset> 
</div> 
</div> 

function Add() { 

    var oClone = document.getElementById("template").cloneNode(true); 
    document.getElementById("placeholder").appendChild(oClone); 
}

此外，這只是一個示例fieldset，它也會有所不同。我聽說這可以使用正則表達式完成，但不知道如何去做。請幫忙。

來源

2012-07-17 CARTIC

這裏談到的最佳（按照我的假設）回答上述問題..

function addMe(a){ 

    var original = a.parentNode; 

     while (original.nodeName.toLowerCase() != 'fieldset') 
    { 
     original = original.parentNode; 
    } 
    var duplicate = original.cloneNode(true); 

    var changeID= duplicate.id; 

    var counter = parseInt(changeID.charAt(changeID.length-1)); 
    ++counter; 
    var afterchangeID = changeID.substring(0,changeID.length-1); 
    var newID=afterchangeID + counter; 
    duplicate.id = newID; 
    var tagNames = ['label', 'input', 'select', 'textarea']; 
     for (var i in tagNames) 
     { 

    var nameChange = duplicate.getElementsByTagName(tagNames[i]); 

     for (var j = 0; j < nameChange.length; j++) 
    {if (nameChange[j].type != 'hidden'){ 
     var elementName = nameChange[j].name; 

       var afterSplitName = elementName.substring(0,elementName.length-1); 

      nameChange[j].name = afterSplitName + counter; 


     var elementId = nameChange[j].id; 

       var afterSplitId = elementId.substring(0,elementId.length-1); 

        nameChange[j].id = afterSplitId + counter; 


    } 
     } 
} 

    insertAfter(duplicate, original); 
} 

function insertAfter(newElement, targetElement) 
{ 
    var parent = targetElement.parentNode; 
    if (parent.lastChild == targetElement) 
    { 
     parent.appendChild(newElement); 
    } 
    else 
    { 
     parent.insertBefore(newElement, targetElement.nextSibling); 
    } 
}

來源

2012-08-14 10:51:24 CARTIC

不知道這可能是實現使用正則表達式，但有些下面的代碼應該工作...

var copyNode = original.cloneNode(true); 
copyNode.setAttribute("id", modify(original.getAttribute("id"))); 
document.body.appendChild(el);

來源

2012-07-17 12:56:01 Nirmal

嗨..感謝您的回覆。這只是改變了DIV元素（模板）的id，而不是字段集中的文本字段或文本區域。 – CARTIC 2012-07-17 13:19:25

在使用javascript克隆時更改字段集元素的名稱

回答

相關問題