使用jQuery動態添加輸入行時的放置問題

Question

以下是添加動態行的腳本。它工作得很好，只有一個錯誤。當我點擊Add link時，它會添加新行。然而，最初的行（只能選擇輸入標籤）來下面，並在新行，而其他保持在那裏只有:( 請參閱HTML代碼，也低於

請參見本圖片瞭解更多說明：

<script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"></script> 

<script type="text/javascript"> 
    $(function(){ var newRowNum = 0; 
     $('#addnew').click(function(){ 
      newRowNum += 1; 
      var addRow = $(this).parent().parent(); 
      var newRow = addRow.clone(); 
      $('input', addRow).val(''); 
      $('td:first-child', newRow).html(newRowNum); 
      $(':input', newRow).each(function(i){ 
       var newID = newRowNum + '_' + i; 
       $(this).attr('id',newID).attr('name',newID); 
      }); 
      addRow.before(newRow); 
      $('a.remove', newRow).click(function(){ 
       $(this).parent().parent().remove(); 
       newRowNum -= 1; 
       return false; 
      }); 
      $('#go').click(function(){ 
       var numRows=$('#tabdata tbody tr').length; 
       $('#myHiddenInput').val(numRows); 
      }); 
      return false; }); }); 
</script> 

下面是HTML部分

<form action="issue-item.php" method="POST"> 
    <fieldset style="width: 1714px;"> 
     <legend style="font-family: fantasy; font-style: !important; color: teal; font-size:30px ;">Issue</legend><br /><br /> 

     <table id="tabdata" align="left" cellpadding="0" cellspacing="0" border="0"> 
      <thead> 
       <tr> 
        <td>S.No.</td> 
        <td align="center">Date</td> 
        <td align="center">Name of Person</td> 
        <td align="center">Name Of Item</td> 
        <td align="center">Quantity</td> 
        <td align="center">Purpose</td> 
       </tr> 
      </thead> 

      <tbody> 
       <tr> 
        <td><a id="addnew" href="">Add</a></td> 
        <td><input type="text" name="0_0" style="width: 120px;"/></td> 
        <td><input type="text" name="0_1" style="width: 170px;"/></td> 
        <td> 
         <select name="0_2" size="1"> 
          <option>Choose item</option> 
          <?php 
           require('blogic.php'); 
           $obj = new blogic(); 
           $result = $obj->select("select id,name_item from store_item"); 
           $count=$obj->select("SELECT COUNT(*) FROM store_item"); 
           $obj->rows = mysql_num_rows($count); 
           while($objres = mysql_fetch_row($result)) 
           { 
            $str=<<<here 
            <option value="$objres[0]">$objres[1]</option> 
            here; 
            echo $str; 
           } 
          ?> 
         </select> 
        </td> 
        <td><input type="text" name="0_3" style="width: 80px;"/></td> 
        <td><input type="text" name="0_4" style="width: 280px;"/></td> 
       </tr> 

       <tr> 
        <td> 
        <input type="hidden" id="myHiddenInput" name="myHiddenInput" value="1"/> 
        </td> 
       </tr> 

       <tr><td><input id="go" name="go" type="submit" /></td></tr> 
      </tbody> 
     </table> 
    </fieldset> 
</form> 

Answer 1

添加以下行後：

$('select', newRow).val($('select', addRow).val()); 
$('select', addRow).val(''); 

另請參閱my example。

=== UPDATE ===

或更換$('input', addRow).val('');有：

$('select', newRow).val($('select', addRow).val()); 
$(':input', addRow).val(''); 

另見my updated example。