SuperTasche SuperTasche - 12 days ago 5
HTML Question

jQuery: Adding rows to a table

I'm completely new to JavaScript and jQuery and now I am trying to modify a html table.

Every time a button is clicked, the some stuff (input, text, button) should be added as the last row. I managed that for the first row, but when I click the button again, the next input will be added next to the last row and not under it. I don't understand why. Hope you can help.

This is my html file:

...
<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>


And this is my 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

You started with a </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>');
Comments