# Formularinhalt in Tabelle durch Button hinzufügen



## Nati13 (25. Nov 2019)

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.

```
<!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 (25. Nov 2019)

```
<!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>
```


----------



## Nati13 (26. Nov 2019)

Vielen Dank für die Hilfe. Hätte nicht gewusst wo ich die id für die Tabelle einfügen soll. danke


----------



## abc66 (26. Nov 2019)

Immer das Element, dem direkt etwas hinzugefügt werden soll.


----------



## Nati13 (26. Nov 2019)

abc66 hat gesagt.:


> Immer das Element, dem direkt etwas hinzugefügt werden soll.


----------

