jQueryを使用して動的に入力行を追加する際の配置に関する問題

Question

動的行を追加するスクリプトは次のとおりです。 1つのエラーで完全に正常に動作します。 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を参照してください。