[GELÖST] Reihenfolge statt aufsteigend !absteigend!

[shephard]

Hallo zusammen!

Jetzt muss ich doch nochmal stören!

Meine Javascript und HTML machen bisher alles wie gewollt von der Semantik her.
Jedoch immer wenn ich auf den Button drücke erstellt er eine neue Row. Wenn ich nochmal drauf drücke erstellt er diese unter der alten Row. Also aufsteigend von der Reihenfolge her.

Wie kann ich das jedoch genau in die andere Reihenfolge machen? Das heißt die alten bereits erstellten
Rows werden nach unten geschoben und die neueste steht ganz oben.

Kann ich das mit meinem Konzept realisieren?

<form name="form1" id="form_id" action="" onsubmit="return false;">
		 
		<div class="input-group">
			<span class="input-group-addon" id="ubung1">Übung</span>
			<input type="text" class="form-control" placeholder="Name der Übung" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="kalo"  aria-hidden="true">Verbrannte Kalorien [cal]</span>
			<input type="number" class="form-control" placeholder="Verbrannte Kalorien [cal] (Wert innerhalb von 1-2500)" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="time0"  aria-hidden="true">Beginn Datum/Zeit</span>
			<input type="datetime-local" class="form-control" placeholder="Beginn Datum/Zeit" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="time1"  aria-hidden="true">Ende Datum/Zeit</span>
			<input type="datetime-local" class="form-control" placeholder="Ende Datum/Zeit" aria-describedby="einfaches-addon1" required>
		</div>
			<input type="reset" value="Zurücksetzen"/>
			<input type="submit" value="Eintragen!" onClick="updateTable();return false;"/>
	</form>



	
<p>
<table border='1'>
<thead><tr><th>Übung</th><th>Verbrannte Kalorien [cal]</th><th>Beginn Datum/Zeit</th><th>Ende Datum/Zeit</th><th>Trainingsdauer [min]</th></tr></thead>
<tbody id="editable"></tbody>
</table>
</p>
 

<p> 
 <table border='1'>
<thead><tr><th>Gesamtsumme Kalorien</th><th>Gesamtdauer Training</th></thead>
<tbody id="table2">
<tr>
         <td id="kalor" width='160'>0</td>
         <td id="tdauer" width='160'>0</td>
</tr>
</tbody>
</table>
</p>

function updateTable(){
	 
     var tabBody, row, cell, x, y, kalo, tdauer;
     tabBody=document.getElementById("editable");
     row=document.createElement("tr");
     cell = document.createElement("td");
     cell.innerHTML=document.forms['form1'].elements[0].value;
     row.appendChild(cell);
	 
	 
	 cell = document.createElement("td");
	 if (kalo_is_valid(document.forms['form1'].elements[1].value)){
	  kalo=document.forms['form1'].elements[1].value
      cell.innerHTML=kalo;
	 }
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
	 x = new Date(document.forms['form1'].elements[2].value);
     cell.innerHTML= x.toLocaleString();
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
	 y = new Date(document.forms['form1'].elements[3].value);
     cell.innerHTML=y.toLocaleString();
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
	 if (date_is_valid(x,y)){
		 tdauer = (y - x) /1000/60
		cell.innerHTML= tdauer;
	 }
     row.appendChild(cell);
	 
    tabBody.appendChild(row);
	
	
	document.getElementById('kalor').innerHTML = parseFloat(document.getElementById('kalor').innerHTML) + parseFloat(kalo);
	document.getElementById('tdauer').innerHTML = parseFloat(document.getElementById('tdauer').innerHTML) + parseFloat(tdauer);
 }

 

[kkapsner]

Anstatt NODE.appendChild() musst du NODE.insertBefore() verwenden.

 

[shephard]

Super Danke! Hat funktioniert

Vielen Dank nochmal ^^

 

[kkapsner]

Vielen Dank nochmal

Bitte - gern geschehen.