web-dev-qa-db-ja.com

jQuery：テーブルに行を追加する

私は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>');
  });
});
jqueryhtmlappendhtml-table
7
SuperTasche

</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>');
10
Psylogic