Question

这是一个有点复杂的问题。我想实现以下行为（动态创建部分）：我发送整个示例：例如。我在这个parrent里面有父div和子div。在每个div中可以放置一些控件（输入，按钮，......）。我有以下要求：

每个部分都可以重复（我的意思是动态创建）max times（maxRepetition）
部分可以嵌套在另一部分中（在这个例子中，只有两个级别的沉浸：parent-＆gt; child，但它也可以是parent-＆gt; child1-＆gt; child2-＆gt; ...）和每个部分都必须接受要求1.

我花了很多时间来实现这个目标，但并不是很有成效。如果有人可以帮助我，我将非常感激。

<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">     
</script>       

<style type="text/css">
      .border
      {
        border-style:solid;
        border-width:1px;
        border-color:black; 
      }      
</style>

</head>

<body>
<div id="main">   
<div id="parent"> 
    <table class="border" width=300>
        <tbody>
            <tr>                    
                <td>
                    <span><input id="field1" type="text" width="100"></span>
                    <p>
                    <div id="child" >
                        <table class="border" width=200>
                            <tbody>
                                <tr>                    
                                    <td>
                                        <span><input id="field2" type="text" width="100"></span>
                                        <p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>            
                    </div>  

                    <span id="addSection_child"  onClick="addSection('child', 2)">Add</span>
                    <span id="removeSection_child" onClick="removeSection('child', this)">Remove</span>

                    <p>     
                                                                                    </td>                                                                   
            </tr>         
        </tbody>
    </table>
</div>
<span id="addSection_parent"  onClick="addSection('parent', 2)">Add</span>
<span id="removeSection_parent" onClick="removeSection('parent', this)">Remove</span>

</div>      

<script type="text/javascript">

   function addSection(layoutRowId, maxRepetition) 
   {    
        var parentDivId = $("#" + layoutRowId).parent().closest('div').attr("id");                                      
        var sectionCount = $("div#" + parentDivId + " div[id = " + layoutRowId + "]").length;   

        if (sectionCount > maxRepetition)       
            return;

        var layoutRowIdSelector = "#" + layoutRowId;
        $(layoutRowIdSelector).prepend('</p>').clone().insertAfter(layoutRowIdSelector);                    
   }


   function removeSection(layoutRowId, currentDiv) 
   {                            
        var parentDivId = $(currentDiv).parent().closest('div').attr("id");

        var sectionCount = $("div#" + parentDivId + " div[id ^= " + layoutRowId + "]").length;  

        if (sectionCount == 1)                              
            return;                     

        var sectionToBeRemovedId = $("#" + parentDivId + " div").filter(":last");

        sectionToBeRemovedId.remove();              
   }


</script>       
</body>
</html>

Answer 1

而不是阅读部分的html，您可以为父部分创建模板，为子部分创建模板，然后添加操作以获取具有新ID的父/子模板的html，然后将其附加到您的页面。如下

<div id="main">
    <div id="parent1">
        <table class="border" width="300">
            <tbody>
                <tr>
                    <td>
                        <span>
                            <input id="field1" type="text" width="100"></span>
                        <p>
                            <div id="child1">
                                <table class="border" width="200">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>
                                                    <input id="field2" type="text" width="100"></span>
                                                <p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> <span id="removeSection_child1" onclick="removeChildSection('1')">Remove child</span>
                            <p>
                    </td>
                </tr>
            </tbody>
        </table>
        <span id="addSection_child1" name="addSection_child" onclick="addChildSection('1')">
                                Add child</span>
    </div>
</div>
<div id="childTemplate" style="display: none">
    <div id="child#index#">
        <table class="border" width="200">
            <tbody>
                <tr>
                    <td>
                        <span>
                            <input id="field1#index#" type="text" width="100"></span>
                        <p>
                    </td>
                </tr>
            </tbody>
        </table><span id="removeSection_child#index#" onclick="removeChildSection('#index#')">
            Remove child</span>
    </div>
    <span id="addSection_child#index#" name="addSection_child#index#" onclick="addChildSection('#parentIndex#')">
        Add child</span> 
</div>
<script type="text/javascript">

    function addChildSection(parentIndex) {
        var childTempHtml = $('#childTemplate').html();
        var newIndex = Guid();
        var newHtml = childTempHtml.replace(/#Index#/gi, newIndex);
        newHtml = newHtml.replace(/#parentIndex#/gi, parentIndex);

        var parent = $('#parent' + parentIndex);
        parent.append(newHtml);
    }
    function removeChildSection(index) {
        var childToDelete = $('#child' + index).remove();
        var removespan = $('#removeSection_child' + index).remove();
    }
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    function Guid() {
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
</script>

您可能会发现结果不符合您的要求，但您可以使用相同的技术。

jquery动态创建可重复的内部div

1 个答案: