jQuery: Adding rows to a table
27,412
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>');
Author by
SuperTasche
Updated on July 27, 2022Comments
-
SuperTasche almost 2 years
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>'); }); });
-
Ryad Boubaker over 7 yearsYou are closing a tr in the first line of the append
-
SuperTasche over 7 yearsThe simplest solution..
-
-
SuperTasche over 7 yearssomeone already commented on that... thank you. i can't believe i didn't see that. ;D