1

我要求 HTML 页面中有 3 个级别的重复组（嵌套字段集）。我能够为单个字段集成功实现添加功能，但无法找到 3 个级别的解决方案。

考虑在 A 内部的 B 内部有 3 个嵌套的重复组 C。问题列表如下：

1）当我添加另一个 C 的克隆（这意味着 B 现在包含 2 个 C），然后当我添加另一个 B（这意味着 A 包含 2 个 B）时。现在新添加的第二个 B 有 2 个 C（因为 B 再次被克隆）但它应该只有 1 个 C。

2）在更改字段集元素的名称和ID时，如果C被克隆（将有2个C的ID分别为xxx1和xxx2这不是问题），但如果用户先添加B，我可以实现它然后在新的 B 中添加 2 个 C，我也无法处理名称更改。

下面是我使用的 HTML 和 java 脚本。请让我知道解决方案或建议我解决问题的更好方法。

    <html >
<head>

<script type="text/javascript" src="cloneFieldset.js"></script>
</head>
<body >


        <form name="mf" method="post" action="#" onsubmit="return false;">
        <input type="hidden" name = "Road_RepeatingGroup" id= "Road_RepeatingGroup_id" />   
         <fieldset name="fieldset1" id="roadRepeatingGroup_id1" > 
                 <input type="hidden" name = "road" id= "road_id" />
        <legend>
          Road
        </legend> 
        <table cellspacing="2" cellpadding="3" border="0" width="100%" name="test">
          <tr>
            <td width="20%">Access Road</td>
          </tr><tr>
           <td width="20%">
              <input type="text" name="Access_Road1" id="Access_Road_id1"/>
            </td>
            </tr>
        </table>
       <input type="hidden" name = "Test_RepeatingGroup" id= "Test_RepeatingGroup_id" />
        <fieldset name="test1" id="test_id1">
        <input type="hidden" name = "Test" id= "Test_id" />
        <legend>
        Test
        </legend>
        <p>
          Instructions
        </p>
        <p>
          <input type="text" name="txt_Instructions_test1" id="txt_Instructions_test_id1" />
        </p>

        <div>
        <input type="hidden" name = "Inner_RepeatingGroup" id= "Inner_RepeatingGroup_id" />
            <fieldset name="innetMost1" id="innetMost_id1">
            <input type="hidden" name = "Inner" id= "Inner_id" />
            <legend>
            InnerMost
            </legend>
            <p>
          Inner Instructions
        </p>
        <p>
          <input type="text" name="txt_InnerInstructions_test1" id="txt_InnerInstructions_test_id1" />
        </p>

        <button type="button" name="btn_Road_Delete_inner" id="btn_Road_Delete_inner1" onclick="deleteMe(this);">
          Delete
        </button>
        <button type="button" name="btn_Road_Edit_inner" id="btn_Road_Edit_inner1" onclick="addMe(this);">
          Add
        </button>
        <input type="hidden" name = "/Inner" id= "Inner_id" />
            </fieldset>
            <input type="hidden" name = "/Inner_RepeatingGroup" id= "Inner_RepeatingGroup_id" />
        <button type="button" name="btn_Road_Delete_test" id="btn_Road_Delete_test1" onclick="deleteMe(this);">
          Delete
        </button>
        <button type="button" name="btn_Road_Edit_test" id="btn_Road_Edit_test1" onclick="addMe(this);">
          Add
        </button>
        </div>
        <input type="hidden" name = "/Test" id= "Test_id1" />
        </fieldset>
        <input type="hidden" name = "/Test_RepeatingGroup" id= "Test_RepeatingGroup_id1" />
         <div>
        <button type="button" name="btn_Road_Delete" id="btn_Road_Delete1" onclick="deleteMe(this);">
          Delete
        </button>
        <button type="button" name="btn_Road_Edit" id="btn_Road_Edit1" onclick="addMe(this);">
          Add
        </button>
        </div>
        <input type="hidden" name = "/road" id= "road_id1" />
      </fieldset> 
            <input type="hidden" name = "/Road_RepeatingGroup" id= "Road_RepeatingGroup_id1" />

                <table>
                <tr><td>
                    <p>
                <input type="button" value="Submit" class="button" onclick="getElementnames();" />
                                <input type="button" value="Check FieldSet" class="button" onclick="checkFieldset();" />
            </p>
                      </td></tr>  </table>
        </form>

</body>
</html>

Java脚本：

function addMe(a){
var original;
    if(a.type == 'button'){

    original = a.parentNode;
    }
    else{

     original= document.getElementById(a);
    }

        while (original.nodeName.toLowerCase() != 'fieldset')
    {
        original = original.parentNode;
    }
    var duplicate = original.cloneNode(true);
     //alert("id :"+duplicate.id);
   var changeID= duplicate.id;

   var counter = parseInt(changeID.charAt(changeID.length-1));
   //alert("counter :"+ counter);
     ++counter;
   var afterchangeID = changeID.substring(0,changeID.length-1);
   //alert("afterchangeID :"+ afterchangeID);
    var newID=afterchangeID + counter;
    //alert("newID :"+ newID);
    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++)
    { //++counter;
        if (nameChange[j].type != 'hidden'){
        var elementName = nameChange[j].name;
                //alert("elementName :"+ elementName);


                var afterSplitName = elementName.substring(0,elementName.length-1);
                //alert("afterSplitName :"+ afterSplitName);
             nameChange[j].name = afterSplitName + counter;
                //alert("nameChange[j].name :"+ nameChange[j].name); 

        var elementId = nameChange[j].id;
                //alert("elementId :"+ elementId);

                var afterSplitId = elementId.substring(0,elementId.length-1);
                //alert("afterSplitId :"+ afterSplitId);
                    nameChange[j].id = afterSplitId + counter;
                       //alert("nameChange[j].id :"+ nameChange[j].id);

    }
        }
}

    insertAfter(duplicate, original);
}

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

0 回答 0