Mit einem Klick auf ein Element soll einer Tabelle eine Reihe hinzugefügt werden. Für ein einfaches Beispiel habe ich mal eine sehr einfache Tabelle genommen:
<table id="global_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="table_row">
<td>1</td>
<td>Alex</td>
</tr>
</tbody>
</table>
<div id="btnNewRow" style="padding: 5px; border: 1px; cursor: pointer;">
Add new value
</div>
Code-Sprache: HTML, XML (xml)
Nach der Tabelle befindet sich ein div-Element. Bei einem Klick auf dieses div-Element soll mit Hilfe von jQuery der Tabelle „global_table“ eine neue Reihe hinzugefügt werden. Dies kann mit folgendem Code realisiert werden:
$("#btnNewRow").on("click", () => {
$("#global_table tr:last").
after('<tr id="table_row"><td>2</td><td>Mara</td></tr>');
});
Code-Sprache: JavaScript (javascript)
Der jQuery Selector tr:last findet die letzte Reihe der Tabelle und fügt an diese eine weitere Reihe an. In der Funktion after kann man nun alles reinschreiben, solange es sich um valides HTML handelt.