web-dev-qa-db-fra.com

jQuery: Ajout de lignes à une table

Je suis complètement nouveau sur JavaScript et jQuery et maintenant j'essaie de modifier une table html.

Chaque fois qu'un bouton est cliqué, certains éléments (saisie, texte, bouton) doivent être ajoutés comme dernière ligne. J'ai réussi cela pour la première ligne, mais lorsque je clique à nouveau sur le bouton, la prochaine entrée sera ajoutée à côté de la dernière ligne et non en dessous. Je ne comprends pas pourquoi. J'espère que vous pourrez aider.

Voici mon fichier 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>

Et voici mon 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

Vous avez commencé avec un </tr>closing tag.

$('#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