jQuery：向表中添加行

Question

我完全不熟悉JavaScript和jQuery，現在我試圖修改一個html表格。

每次點擊一個按鈕時，應該添加一些東西（輸入，文本，按鈕）作爲最後一行。我管理了第一行，但是當我再次單擊該按鈕時，下一個輸入將被添加到最後一行旁邊，而不是它下面。我不明白爲什麼。希望你能幫助。

這是我的html文件：

... 
<main> 
    <article id="main"> 
    ... 
    <section id="neue vorschlaege"> 
     ... 
     <table id="vorschlaege"> 
     <tr> 
      <td>Deine Idee</td> 
      <td>Vorschläge</td> 
      <td>Kategorie</td> 
      <td>Löschen</td> 
     </tr> 
     <!-- I want to insert new rows here --> 
     </table> 
    </section> 
    </article> 
    ... 
</main> 

，這是我的jquery.js：

$(document).ready(function(){ 
    $('#abschicken').on('click', function(add){ 
    add.preventDefault(); 
    var name = $("#name").val(); 
    var fvv = $('input[name=FVV]:radio:checked').next('label:first').html(); 
    var zutaten = $("#zutaten").val(); 
    var passwort = $("#pw").val(); 

    $('#vorschlaege > tbody:last-child').append(
     '</tr>' 
     +'<td><input type="checkbox" checked="true"></td>' 
     +'<td>'+name+'</td>' 
     +'<td>'+fvv+'</td>' 
     +'<td><button id="loeschen">löschen</button></td>' 
     +'</tr>'); 
    }); 
}); 

Answer 1

你開始一個</tr>關閉標籤。

$('#vorschlaege > tbody:last-child').append(
      '<tr>'// need to change closing tag to an opening `<tr>` tag. 
      +'<td><input type="checkbox" checked="true"></td>' 
      +'<td>'+name+'</td>' 
      +'<td>'+fvv+'</td>' 
      +'<td><button id="loeschen">löschen</button></td>' 
      +'</tr>');