行の追加と削除テーブルJquery

Question

私はjqueryでテーブルの行を追加する際に問題があります。私の場合はテーブルの最後の行に新しい行を追加したいのですが、追加するのは成功ですが、新しい行が追加されました。修理する？私はこの方法で使用する初心者です。 jsfieldのサンプルコード、ありがとう。

var i = 1; 
 
    $("#addbutton").click(function() { 
 
     $("#t tr:first").append('<tr>'+ 
 
      '<td>File</td>'+ 
 
      '<td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>'+ 
 
      '<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function() { 
 
     }); 
 
     i++; 
 
    }); 
 

 
    $(document).on('click', 'button.removebutton', function() { 
 
     $(this).closest('tr').remove(); 
 
     return false; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t"> 
 
     <tr> 
 
      <td>Id Gor</td> 
 
      <td> <input type="text" name="Id Gor" id="txtTitle" name="txtTitle"></td> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td>File</td> 
 
      <td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
    </table> 
 
    <table> 
 
     <tr> 
 
      <td style="width: 33px;"></td> 
 
      <td style="width: 183px;">&nbsp;</td> 
 
      <td><input type="button" id="addbutton" value="Add Row"></td> 
 
     </tr> 
 
    </table>

enter code here 

Answer 1

エラーはあなたが$（ "＃tの間tr：最初の"）を使用していることで、そのブロックは、（最初​​の行を取得している）テーブル#tをの、および第1のセレクタから：次に、あなただけのTRを削除するので、実際にあなたが望むものを達成するために

<tr><tr></tr><tr></tr><tr></tr></tr> 

ようなもので終わるされ、行に、それに付加やっています。その小規模な修正が働いているあなたのコードは以下の通りです。

var i = 1; 
 
    $("#addbutton").click(function() { 
 
     $("#t").append('<tr>'+ 
 
      '<td>File</td>'+ 
 
      '<td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>'+ 
 
      '<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function() { 
 
     }); 
 
     i++; 
 
    }); 
 

 
    $(document).on('click', 'button.removebutton', function() { 
 
     $(this).closest('tr').remove(); 
 
     return false; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t"> 
 
     <tr> 
 
      <td>Id Gor</td> 
 
      <td> <input type="text" name="Id Gor" id="txtTitle" name="txtTitle"></td> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td>File</td> 
 
      <td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
    </table> 
 
    <table> 
 
     <tr> 
 
      <td style="width: 33px;"></td> 
 
      <td style="width: 183px;">&nbsp;</td> 
 
      <td><input type="button" id="addbutton" value="Add Row"></td> 
 
     </tr> 
 
    </table>