1

HTML ページに 3 レベルの繰り返しグループ (ネストされたフィールドセット) が必要です。単一のフィールド セットに対して追加機能を正常に実行できますが、3 つのレベルのソリューションを見つけることができません。

A の内側にある B の内側に 3 つのネストされた繰り返しグループ C があるとします。問題のリストは次のとおりです。

1) C の別のクローンを追加するとき (つまり、B が 2 つの C を囲むことを意味します)、次に別の B を追加するとき (A が 2 つの B を囲むことを意味します)。新しく追加された 2 番目の B には 2 つの C がありますが (B は再び複製されるため)、C は 1 つだけである必要があります。

2) フィールド セット要素の名前と ID を変更している間、C が複製されている場合はそれを達成できます (問題ではない xxx1 と xxx2 として ID を持つ 2 つの C があります) が、ユーザーが最初に 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>

ジャバスクリプト：

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