Guten Abend zusammen, ich bin derzeit grade beim einschulen für JavaScript und soll folgende Aufgabe machen:
## A8 - Neue Elemente (fortgeschritten)
Erstellt eine Webseite mit einer Tabelle von Benutzern. Zusätzlich gibt es ein Formularfeld für Vor- und Nachnamen und einen Button. Klickt man auf den Button, wird ein neuer Benutzer, basierend auf den Formularfeldern, in der Tabelle hinzugefügt.
Jetzt habe ich schon etwas herumgeschaut und verschiedenes gefunden mit node, Child und clone, bin mir aber nicht sicher was davon benötigt wird oder nicht. Hier mal mein Code. Hat irgendwer evtl. ein paar Tips für mich oder woran es scheitert? Vielen Dank für die Hilfe im voraus.
## A8 - Neue Elemente (fortgeschritten)
Erstellt eine Webseite mit einer Tabelle von Benutzern. Zusätzlich gibt es ein Formularfeld für Vor- und Nachnamen und einen Button. Klickt man auf den Button, wird ein neuer Benutzer, basierend auf den Formularfeldern, in der Tabelle hinzugefügt.
Jetzt habe ich schon etwas herumgeschaut und verschiedenes gefunden mit node, Child und clone, bin mir aber nicht sicher was davon benötigt wird oder nicht. Hier mal mein Code. Hat irgendwer evtl. ein paar Tips für mich oder woran es scheitert? Vielen Dank für die Hilfe im voraus.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Namensliste</title>
</head>
<body>
<form>
<input type="text" name="Vorname"/>
<input type="text" name="Nachname"/>
<button type="submit" onclick="clone_this()">Hier klicken um Namen hinzuzufügen.</button>
</form>
<table>
<tr><th>Vorname</th><th>Nachname</th></tr>
<tbody>
<tr>
</tr>
</tbody>
</table>
<script>
let newLine = document.createElement('tr'),
newColumn = document.createElement('td'),
newHeader = document.createElement('h3'),
newText = document.createTextNode('Überschrift');
newHeader.appendChild(newText);
newColumn.appendChild(newHeader);
newLine.appendChild(newColumn);
let elements = document.querySelectorAll('tr');
for (let i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('<td>Vorname</td>') !== -1) {
let row = document.createElement('tr');
row.innerHTML = '<td><h3>Vorname</h3></td>';
elements[i].before(row);}}
</script>
</body>
</html>