Werte per Button in neue dynamische Tabellenzeile übernehmen

MagicMiges · 11. April 2020

Hallo,

ich würde gerne eine Tabelle durch zuvor in Textfelder eingetragene Werte erweitern. Dabei soll die Tabelle durch den Click auf den Button um die entsprechende Zeile erweitert werden. Dynamische Tabelle, Textfelder und Button hab ich bereits zusammen, nur werden die Werte lediglich in die erste Zeile übernommen.

Ich habe den gesamten Code in ein HTML-File geschrieben und darin CSS und JavaScript eingebaut.

Code

<body>
    <div id="focus"></div>
      <div>
        <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
        </label>
        <label id="Termindatum" for="termindatum">Datum
          <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" readonly>
        </label>
        <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung: 
            <input id="lbModul" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
        </label>
        <label id="Start" for="start">Von: 
            <input id="lbStart" type="time" name="start">
        </label>
        <label id="Ende" for="ende">Bis: 
            <input id="lbEnde" type="time" name="ende">
        </label>
        <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
          <input id="lbKurs" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
        </label>
      </div>
  </body>
...
<body>
  <script type='text/javascript'>
    function clone_this()
    {
      NewRow = document.getElementById('tab').lastChild.cloneNode(true);
      document.getElementById('tab').appendChild (NewRow);
    
      var i = document.getElementById('tab').childNodes.length - 1;
    
      for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++)
      {
       var newname ='feld[' +i+ '][' +j+ ']';
    
       document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname) ;
       var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name;
       document.getElementById('tab').lastChild.getElementsByTagName('input')[j].value=name;
      }
      document.getElementById("tbDatum").value = document.getElementById("lbDatum").value;
      document.getElementById("tbVon").value = document.getElementById("lbStart").value;
      document.getElementById("tbBis").value = document.getElementById("lbEnde").value;
      document.getElementById("tbModul").value = document.getElementById("lbModul").value;
      document.getElementById("tbKurs").value = document.getElementById("lbKurs").value;
    }
  </script>
    
  
      <table id='tab' border="2"'>
        <tr>
          <td width='160'><input type='text' id="tbDatum" name='Datum' value='Datum' readonly></td>
          <td width='60'><input type='time' id="tbVon" name='Start' value='Von' readonly></td>
          <td width='60'><input type='time' id="tbBis" name='Ende' value='Bis' readonly></td>
          <td width='160'><input type='text' id="tbModul" name='Terminbezeichnung' value='Modulbezeichnung' readonly></td>
          <td width='160'><input type='text' id="tbKurs" name='Kursbezeichnung' value='Kursbezeichnung' readonly></td>
        </tr>
      </table>

      <input type='button' id='erstellen' value='Festlegen' onClick='clone_this()'>
  </body>

Alles anzeigen

Bei Ideen bzw Tipps zur Lösung des Problems wäre ich Dankbar.

Sempervivum · 11. April 2020

Ein Problem, auf das ich ganz am Anfang gestoßen bin, ist folgendes: Deine Tabellendefinition ist nicht vollständig, es fehlt tbody. Der Browser erkennt das und fügt eigenmächtig das tbody hinzu. Man erkennt das, wenn man sich die Tabelle im HTML-Inspektor ansieht. Damit ist die Struktur bzgl. Kindelementen nicht mehr so, wie man sie erwartet. Um zu wissen, woran man ist, habe ich im HTML der Tabelle das tbody hinzu gefügt.

Was das Javascript betrifft, so habe ich das weitgehend überarbeitet und, hoffentlich, vereinfacht. Dieses funktiniert dann:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="focus"></div>
    <div>
        <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
        </label>
        <label id="Termindatum" for="termindatum">Datum
            <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" value="04.03.2020" readonly>
        </label>
        <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung:
            <input id="lbTerminbezeichnung" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
        </label>
        <label id="Start" for="start">Von:
            <input id="lbStart" type="time" name="start">
        </label>
        <label id="Ende" for="ende">Bis:
            <input id="lbEnde" type="time" name="ende">
        </label>
        <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
            <input id="lbKursbezeichnung" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
        </label>
    </div>
    <script>
        function clone_this() {
            // tbody in Variable bereit stellen
            var tbody = document.querySelector('#tab tbody');
            // neue Tabellenzeile durch Klonen der letzten erzeugen
            newRow = tbody.lastElementChild.cloneNode(true);
            // und an Ende in den tbody einfuegen
            tbody.appendChild(newRow);
            // Eingabefelder in der neuen Tabellenzeile bereit stellen
            var dstInputs = newRow.querySelectorAll('input');
            for (j = 0; j < dstInputs.length; j++) {
                // Quell-Eingabefeld bereitstellen
                var srcInput = document.getElementById('lb' + dstInputs[j].name);
                // und den Wert daraus in das Eingabefeld
                // in der neuen Tabellenzeile uebertragen
                dstInputs[j].value = srcInput.value;
            }
        }
    </script>
    <table id="tab" border="2">
        <tbody>
            <tr>
                <td width=" 160"><input type="text" name="Datum" value="Datum" readonly></td>
                <td width="60"><input type="time" name="Start" value="Von" readonly></td>
                <td width="60"><input type="time" name="Ende" value="Bis" readonly></td>
                <td width="160"><input type="text" name="Terminbezeichnung" value="Modulbezeichnung" readonly></td>
                <td width="160"><input type="text" name="Kursbezeichnung" value="Kursbezeichnung" readonly>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" id="erstellen" value="Festlegen" onclick="clone_this()">
</body>

</html>

Alles anzeigen

Was noch nicht befriedigt, ist, dass die erste Tabellenzeile eigentlich der Kopf thead sein müsste. Aber da wollte ich nicht einsteigen.

Werte per Button in neue dynamische Tabellenzeile übernehmen

Jetzt mitmachen!

Teilen