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:
<!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.
eigentlich hatte ich mir vorgestellt, dass Du das in Eigeniniative selbst hinzu fügen kannst. Informiere dich am besten über Eventlistener und Eingabefelder (input):