Javascript 使用jQuery克隆表单

我有以下表格

<div id="div1" style="margin-bottom:4px;" class="clon">  
      <span id ="display_input1">  
           Answer:<select name="Answer1" id="Answer1">                    
                     <option value='0'>Select Answer</option>  
                     <option value='1'>Excellent</option>  
                     option value='2'>Very Good</option>  
                  </select>  
      </span>  

      &nbsp; &nbsp;New Answer<input type="checkbox" id="Enable1" name="Enable1" value="1" onclick=display_inpt(this) />  

          &nbsp; &nbsp; <?  

            function dropdown($starting, $factor, $ending)      
            {

             echo "Point<select name=\"Mark1\" id=\"Mark1\">";  
             echo "<option value=\"\">Select Point</option>";  
             $i=$starting;  
             while($i >= $ending)  
             {  
                echo "<option value=\"$i\">$i</option>";  
                $i=$i-$factor;  
             }  
            echo "</select>";   
            }  

            dropdown(10, .5, -10);  
            ?>  
</div>  

    <input type="button" id="Add" value="Add Another Option" />

但这是不正确的，所以我应该如何编写jquery代码来实现这一点

检查这把小提琴：

id和名称重命名的基础通过以下方式完成：

function doClone() {
    var old = $('.clon').length;
    var newC = old + 1;
    var cloned = $('.clon:first').clone();

    // add more element types as needed here
    cloned.find('p,input,select').each(function() {
        id = $(this).attr('id');
        name = $(this).attr('name')
        $(this).attr('id', id.substring(0, id.length-1) + newC).attr('name', name.substring(0, name.length-1) + newC);
    });

    // change the parent container as needed
    cloned.appendTo('body');
}

一个可能的增强是将选择器、新索引和父容器作为参数传递给上述函数。例如：

doClone('.clon:first', $('.clon').length+1, 'body');

---

以下JSFIDLE示例满足您的要求：

我编写了一个简短的代码段，它增加了所有元素的id和名称，这些元素的类为“IncreaseNumber”：

---

在我看来，您所拥有的一切都很好，但您显然需要将

newElem

添加到DOM中（并关闭

单击
和
就绪
事件处理程序，但我猜您在问题中错过了这一点）。为什么要使用新的编号而不是增加编号？
function doClone() {
    var old = $('.clon').length;
    var newC = old + 1;
    var cloned = $('.clon:first').clone();

    // add more element types as needed here
    cloned.find('p,input,select').each(function() {
        id = $(this).attr('id');
        name = $(this).attr('name')
        $(this).attr('id', id.substring(0, id.length-1) + newC).attr('name', name.substring(0, name.length-1) + newC);
    });

    // change the parent container as needed
    cloned.appendTo('body');
}

doClone('.clon:first', $('.clon').length+1, 'body');

$(clonedElement).find('.increaseNumbers').each(function(){
        var oldId = $(this).attr('id');
        var oldName = $(this).attr('name');
        var regexp = new RegExp(/(.*?)(\d.*)/);

        if (oldId) {
            var matcher = oldId.match(regexp);
            var newId = matcher[1] + (parseInt(matcher[2]) + 1);
            $(this).attr('id', newId);
        }
        if (oldName) {
            var matcher = oldName.match(regexp);
            var newName = matcher[1] + (parseInt(matcher[2]) + 1);
            $(this).attr('name', newName);
        }        
});