Formularinhalt in Tabelle durch Button hinzufügen

Nati13

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

abc66

Top Contributor
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" />
        <input type="button" onclick="addtb()" value="Hier klicken um Namen hinzuzufügen." />
    </form>
    <table>
        <tr>
            <th>Vorname</th>
            <th>Nachname</th>
        </tr>
        <tbody id="tb">
        </tbody>
    </table>

    <script>
        function addtb() {
            var formData = new FormData(document.querySelector('form'));
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            td1.append(document.createTextNode(formData.get('Vorname')));
            td2.append(document.createTextNode(formData.get('Nachname')));
            tr.appendChild(td1);
            tr.appendChild(td2);
            document.getElementById('tb').appendChild(tr);
        }
    </script>
</body>
</html>
 

Ähnliche Java Themen

Neue Themen


Oben