使用jquery克隆表單字段

Question

我正在嘗試克隆使用jquery的表單中的字段。

我想實現顯示的方面如下：

SELECT  SELECT  TEXT INPUT 
RADIO  RADIO  RADIO 

Clone 1 
SELECT  SELECT  TEXT INPUT 
RADIO  RADIO  RADIO 

Clone2 
SELECT  SELECT  TEXT INPUT 
RADIO  RADIO  RADIO 


What I end up getting is: 
RADIO RADIO RADIO 
RADIO RADIO RADIO 
RADIO RADIO RADIO 
SELECT  SELECT  TEXT INPUT 
SELECT  SELECT  TEXT INPUT 
SELECT  SELECT  TEXT INPUT 

在下面我的代碼，我已經使用了。經過功能遵循選擇的選項，但它仍然顯示其上方

（newElem）;

$（'＃condition'+ num）.after（newElem）; //在最後一個「可複製」輸入字段後面插入新元素 $（'＃logical'+ num1）.after（newElem）;

的演示是對的jsfiddle http://jsfiddle.net/noscirre/ATzBA/

HTML

<table width="100%" cellspacing="4" cellpadding="5" border="0"> 
      <tbody><tr id="logical1" class="clonedInput1"> 
       <td class="first-column">&nbsp;</td> 
       <td><input type="radio" name="logicalOperator" default> 
       AND &nbsp; &nbsp; 
       <input type="radio" name="logicalOperator" > 
       OR &nbsp; &nbsp; 
       <input type="radio" name="logicalOperator" > 
       NOT 
       </td> 
      </tr> 
      <tr id="condition1" class="clonedInput"> 
       <td class="first-column">Condition #2</td> 
       <td><span style="float:left; padding-right: 10px;"> 
       <select id="firstname" name="firstname" class="standard_select" style="width:147px; background:#fff;"> 
        <option>Blah Name</option> 
        <option>Blah list</option> 
        <option>Blah Type</option> 
        <option>Blah Id</option> 
        <option>Blah Name</option> 

       </select>&nbsp;<select id="firstname" name="firstname" class="standard_select" style="width:147px;"> 
        <option>Equals =</option> 
        <option>Not Equal &lt;&gt;</option> 
        <option>Greater &gt;</option> 
        <option>Less &lt;</option> 
        <option>Contains</option> 
        <option>In</option> 
        <option>Not In</option> 
       </select>&nbsp;<input type="text" id="conValue" name="conValue" class="short_input" value="" style="width:147px;"> 
       </span> 
       </td> 
</tr> 
<tr> 
       <td class="first-column">&nbsp;</td> 
       <td> 
<div> 
        <input type="button" id="btnAdd" value="Add" /> 
        <input type="button" id="btnDele" value="Del" /> 
       </div>  
       </td> 
</tr></tbody> 
</table> 

JAVASCRIPT

​`   $('#btnAdd').click(function() { 
       var num  = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
       var num1  = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have 

       var newNum = new Number(num + 1);  // the numeric ID of the new input field being added 
       var newNum1 = new Number(num1 + 1);  // the numeric ID of the new input field being added 

       // create the new element via clone(), and manipulate it's ID using newNum value 
       var newElem = $('#condition' + num).clone().attr('id', 'condition' + newNum); 
       // create the new element via clone(), and manipulate it's ID using newNum value 
       var newElem1 = $('#logical' + num1).clone().attr('id', 'logical' + newNum1); 

       // manipulate the name/id values of the input inside the new element 
       newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       // manipulate the name/id values of the input inside the new element 
       newElem.children(':first').attr('id', 'name' + newNum1).attr('name', 'name' + newNum1); 

       // insert the new element after the last "duplicatable" input field 
       $('#condition' + num).after(newElem); 
       // insert the new element after the last "duplicatable" input field 
       $('#logical' + num1).after(newElem1); 

       // enable the "remove" button 
       $('#btnDele').attr('disabled',''); 

       // business rule: you can only add 5 names 
       if (newNum == 5) 
        $('#btnAdd').attr('disabled','disabled'); 
        // business rule: you can only add 5 names 
       if (newNum1 == 5) 
        $('#btnAdd').attr('disabled','disabled'); 
      }); 

      $('#btnDele').click(function() { 
       var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
       var num1 = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have 
       $('#condition' + num).remove();  // remove the last element 
       $('#logical' + num).remove();  // remove the last element 

       // enable the "add" button 
       $('#btnAdd').attr('disabled',''); 

       // if only one element remains, disable the "remove" button 
       if (num-1 == 1) 
        $('#btnDele').attr('disabled','disabled'); 
       if (num1-1 == 1) 
        $('#btnDele').attr('disabled','disabled'); 
      }); 

      $('#btnDele').attr('disabled','disabled'); 

​` 

Answer 1

的newElem1插入logicalxxx項目之後，這是最後插入的條件之前項目。如果更換

  // insert the new element after the last "duplicatable" input field 
      $('#condition' + num).after(newElem); 
      // insert the new element after the last "duplicatable" input field 
      $('#logical' + num1).after(newElem1); 

與

$('#condition' + num).after(newElem).after(newElem1); 

newelem1是newelem後直接插入，我認爲給出預期效果（更新小提琴：http://jsfiddle.net/ATzBA/2/）如果你使用div的，而不是一個表