Frage Dynamisch eine Tabellen-Zeile erstellen?

[Monamon]

Hey ihr,

Erklärung zur Tabelle:
Die Tabelle soll eine Art Zeit-Planer sein, die ersten zwei Spalten sind der Kundenname und die Kundennummer, die weiteren 10 Spalten, sind verschiedene Arbeitsbereiche, bei denen man mit nem Input type=time Stunden hinzufügen oder abziehen kann und ganz zum Schluss ist noch eine Spalte Summe, die die Stunden zusammenzählt und ein Button zum löschen der Zeile.

Mein Problem:
Ich hab schon alle möglichen Google Lösungen versucht, jedoch war das beste Ergebnis bis jetzt, dass eine Zeile hinzugefügt wurde, jedoch ohne Inhalt oder Buttons oder Sonstiges. Ich würde mir aber wünschen, dass ich den Namen und die Nummer aus den Input Felder rausholen kann und in die Zeile speichern und die anderen Spalten ein Input bekommen.

Ich hoffe ihr könnt mir weiterhelfen :O

Hier mein HTML:

 <table class="table" id="table">
    <tr>
        <th>Ordername</th>
        <th>Ordernumber</th>
        <th>Pitch</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>Prodection</th>
        <th></th>
        <th></th>
        <th>Sum</th>
    </tr>
    <tr>
        <td style="width:10%"></td>
        <td style="width:10%"></td>
        <td>Research</td>
        <td>Design</td>
        <td>Modification</td>
        <td>Layouts</td>
        <td>Specification</td>
        <td>Revision</td>
        <td>Communication</td>
        <td>Working Drawings</td>
        <td>Admin Project Managment</td>
        <td>Graphics</td>
    </tr>
    <tr>
        <td><input id="Ordername" type="text" name="Ordername"></td>
        <td><input id="Ordernumber" type="text" name="Ordernumber"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>00:00</td>
        <td><input type="button" value="Submit" onclick="addRow()"></td>
    </tr>
  </table>
</div>

Javascript:

<script>
function addRow(){
    var table = document.getElementById(table);
    var row = table.insertRow(2);

    var cellOrdername = row.insertCell(0);
    var text1 = document.getElementById(Ordername);
    cellOrdername.appendChild(text1);

    var cellOrdernumber = row.insertCell(1);
    var text2 = document.getElementById(Ordernumber);
    cellOrdernumber.appendChild(text2);

    for (var i = 1; i < 12; i++) {
        var cell[i] = row.insertCell(i);
        var el = document.createElement('input');
        el.type = 'time';
        el.step = '1800';
        cell[i].appendChild(el);
    };

    var cellSum = row.insertCell(12);
    var Sum = "00:00";
    cellSum.appendChild(Sum);

    var cellDeleteRow = row.insertCell(13);
    var button = document.createElement('input');
    button.type = "button";
    button.onclick = "deleteRow(this)";
    button.value = "Delete";
    cellDeleteRow.appendChild(button);

}
function deleteRow(el) {
    while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
        el = el.parentNode;
    }

    if (el.parentNode && el.parentNode.rows.length > 3) {
        el.parentNode.removeChild(el);
    }
}
</script>

Lg Mona

 

[Tronjer]

Du bist da konzeptionell auf dem Holzweg.

Die Order sollten als Array übergeben werden, über das im HTML per Schleife iteriert wird. Beim hinzufügen oder löschen von Tablerows erzeugt man keine neuen DOM-Elemente, sondern verändert das Array. Was dann auch das JavaScript vereinfacht.

Außerdem erzeugt input type="time" ein Date Object; du brauchst type="number".

Das hier wäre ein Ansatz:
https://plnkr.co/edit/CGbUpZUOnano48TtcI7k?p=preview

 

[Monamon]

Hey danke für die Antwort, aber ehrlich gesagt versteh ich den Code nicht
Ich hab noch nicht viel Erfahrung mit Js und dachte nicht, dass es so ein großes Problem wird eine Tabellen Zeile hinzuzufügen. Wieso kann man das denn nicht mit createElement('input') machen?

 

[Tronjer]

Hey danke für die Antwort, aber ehrlich gesagt versteh ich den Code nicht

Es reicht doch, wenn du den Code übernimmst und auf deine Anforderungen abwandelt, aber ich kann das bedarfsweise auch erklären.

Ich hab noch nicht viel Erfahrung mit Js und dachte nicht, dass es so ein großes Problem wird eine Tabellen Zeile hinzuzufügen.

Passiert in meinem Beispiel doch. Der Klick auf die Buttons erzeugt entweder eine neue Table Row samt Input-Feldern erzeugt oder löscht die aktuelle. Das createElement() läuft hier 'unsichtbar' im Hintergrund.