Javascript 动态嵌套字段集
我要求在HTML页面中有3级重复组嵌套字段集。我能够为单个字段集成功实现添加功能，但无法为3个级别找到解决方案 假设B中有3个嵌套重复组C，A中有3个嵌套重复组C。问题列表如下： 1当我添加另一个C的克隆，这意味着B现在包含2个C，然后当我添加另一个B，这意味着A包含2个B。现在，新添加的第二个B有2个C，因为B再次被克隆，但它应该只有1个C 2在更改字段集元素的名称和ID时，如果克隆C，我可以实现这一点。将有两个C，ID分别为xxx1和xxx2，这不是问题，但如果用户先添加B，然后在新B中添加两个C，我也无法处理名称更改 下面是我使用的HTML和java脚本。请让我知道一个解决方案或建议我一个更好的方法来解决这个问题Javascript 动态嵌套字段集,javascript,fieldset,Javascript,Fieldset,我要求在HTML页面中有3级重复组嵌套字段集。我能够为单个字段集成功实现添加功能，但无法为3个级别找到解决方案 假设B中有3个嵌套重复组C，A中有3个嵌套重复组C。问题列表如下： 1当我添加另一个C的克隆，这意味着B现在包含2个C，然后当我添加另一个B，这意味着A包含2个B。现在，新添加的第二个B有2个C，因为B再次被克隆，但它应该只有1个C 2在更改字段集元素的名称和ID时，如果克隆C，我可以实现这一点。将有两个C，ID分别为xxx1和xxx2，这不是问题，但如果用户先添加B，然后在新B中添加
<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>
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);
}
}
你可以加一点涂鸦。我花了一分钟才了解a，B和C的克隆过程。这可能会阻止人们帮助你，因为完全理解这个问题已经需要一段时间了。嗨…请在屏幕上涂鸦…你想让我添加一个演示还是缩短问题描述？我正在考虑一个小图片/图形来解释克隆时的包装和包含元素。也许这是没有必要的，但当我发现你的问题时，我想到了这一点。