Wie kann ich einen berechneten Wert in eine Tabelle einfügen?

[shephard]

Hallo liebe Leute!

Ich versuche einen Log für eine Webseite zu erstellen. Dabei werden die Werte in die Tabelle geschrieben und die Funktion macht dann eine neue Zeile bei der Tabelle.

Jedoch muss das Feld Trainingsdauer berechnet werden von den beiden Feldern Beginn Datum/Zeit und Ende Datum/Zeit. Ich weiß jedoch leider nicht wie ich das machen kann.

Kann mir jemand hier helfen wie ich das realisieren könnte? Oder bin ich hier am falschen Weg?
Bin noch neu bei Javascript.

<script type="text/javascript">
                function ad_row()
                {
				
                        var table_id = "t1";
                        var table = document.getElementById( table_id );
                        var rows = table.getElementsByTagName( "tr" ).length;
                        var tr = table.insertRow( rows );
                        var td1 = document.createElement( "td" );
                        var td2 = document.createElement( "td" );
                        var td3 = document.createElement( "td" );
			var td4 = document.createElement( "td" );
			var td5 = document.createElement( "td" );

					
						
                        td1.innerHTML = '<input type="datetime-local" name="beginn" />';
                        td2.innerHTML = '<input type="datetime-local" name="ende" />';
                        td3.innerHTML = '<input type="number" name="dauer" />';
			td4.innerHTML = '<input type="text" name="ubung" />';
			td5.innerHTML = '<input type="number" name="kalorien" />';
						
					
                        tr.appendChild( td1 );
                        tr.appendChild( td2 );
                        tr.appendChild( td3 );
			tr.appendChild( td4 );
			tr.appendChild( td5 );
                }
</script>

<form>
        <br /><br />
        <table id="t1" border="1">
                <tr><th>Beginn Datum/Zeit</th><th>Ende Datum/Zeit</th><th>Trainingsdauer</th><th>Übung</th><th>Verbrannte Kalorien</th></tr>
                <tr>
				
			<td><input type="datetime-local" name="beginn" /></td>
			<td><input type="datetime-local" name="ende" /></td>
                        <td id="dauer"><input type="number" name="dauer" /></td>
                        <td><input type="text"   name="ubung" /></td>
                        <td><input type="number" name="kalorien" /></td>
                </tr>
        </table>
        <br /><br />
        <input type="button" value="Eintrag hinzufügen" onclick="ad_row()" />
        <br /><br />
        <br /><input type="submit" value="OK"/>
</form>

 

[Dormilich]

ich sehe das Problem nicht so ganz. du hast die Differenz doch schon berechnet.

aber wenn du die Werte nicht in die <input> schreibst, bleiben die halt leer.

 

[shephard]

Huch, die 3 Zeilen die ich nun auskommentiert habe, sind noch aus Versehen drinnen gewesen weil ich etwas ausprobiert habe.

Ich weiß nicht wie du das meinst in die input zu schreiben? ich speichere die Werte eigentlich nie wirklich ab

 

[Dormilich]

wozu die ganzen Werte berechnen? Du arbeitest mit fixen Werten für Start/Ende, da kannst du das auch gleich ins HTML schreiben:

td1.innerHTML = '<input type="datetime-local" name="beginn" value="2016-03-17 09:00">';
td2.innerHTML = '<input type="datetime-local" name="ende" value="2016-03-17 17:00">';
td3.innerHTML = '<input type="number" name="dauer" value="480">';

 

[shephard]

Die Zeilen hab ich vergessen rauszulöschen, die waren nur testweise drinnen - sorry deswegen ist mir jetzt erst aufgefallen ^^

Er sollte die Werte dann nehmen die der Benutzer dann in die Tabelle schreibt. Also keine hardgecodeten Werte.
Ich hab die verwirrenden Zeilen nun rausgelöscht.

 

[Dormilich]

dann brauchst du einen Event Listener.

 

[shephard]

Ich denke ich muss das Konzept grundsätzlich überarbeiten. Kennt jemand ein Tutorial wie man folgendes machen kann:

Der User sollte in einem Formular folgende Attribute eingeben:
Beginn (Datum/Zeit), Ende (Datum/Zeit), Übungsname und Verbrannte Kalorien eingeben können.

Sobald der User auf den Button drückt werden die in das Formular eingegebenen Werte in einer Liste unterhalb des Formular angezeigt auf der Webseite (Trainingsdauer wird ebenfalls noch angezeigt, ist aber dann ein berechneter Wert, wird vom User nicht in das Formular eingegeben) - jedoch sollte die Liste dann absteigend sortiert sein (welche mit meiner momentanen Idee ebenfalls nicht realisiert werden kann)

 

[Dormilich]

Und das soll ohne Serverbeteiligung passieren?

 

[shephard]

Ja, das ist egal und soll nur zur Übung dienen - deshalb nur clientseitig. Wenn ich sozusagen 10x auf den Button drücke und dann 10 Einträge in der Liste habe, dann dürfen die beim Neuladen der Seite weg sein.

 

[Dormilich]

Da gibt’s leider keinen einfachen Weg. Prinzipiell geht es so, daß du die Werte sammelst (in eine geeignete Datenstruktur), diese dann sortierst und dann in das gewünschte HTML umwandelst.

- - - Aktualisiert - - -

Per Serverscript wär das deutlich einfacher, da reicht mitunter schon eine geschickte Wahl der Formularelementnamen um so eine Datenstruktur zu erzeugen.

 

[shephard]

Ich werde das mal versuchen. Grundsätzlich habe ich eine Version im Kopf, jedoch weiß ich noch nicht wirklich wie ich das syntaktisch schreibe.

Aber Danke schonmal!