Jörg Kruses Webmaster-Forum > JavaScript

Tabelle sortieren [3]

21 Jerry02

achso das hatte ich wahrscheinlich überlesen! gut ich probirere weiter :)

22 Jerry02

So ich hab das jetzt so gemacht:

function TabelleSortieren (Spalte)

	{
		function mysort(a, b)
		{
			return a['Wert'] > b['Wert'] ? 1 :
			a['Wert'] < b['Wert'] ? -1 :
			0;
		}
		
		var Anzahl = document.getElementById("Tabelle2").childNodes.length;
		Unsortiert = new Array();
		for (var i = 1 <= Anzahl; i++) {
			Unsortiert[i - 1] = new Array();
			Unsortiert[i - 1]['Inhalt'] = document.getElementById("Tabelle2").childNodes[i];
			Unsortiert[i - 1]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
		}
		Unsortiert[i - 1].sort(mysort);
	}

und die Links im Kopf der Tabelle sehen so aus:

<table id="Tabelle2" border="1">
	<tr>
		<td><a href="#" onclick="TabelleSortieren(0)"><font color="black">WKN</a></td>
		<td><a href="#" onclick="TabelleSortieren(1)"><font color="black">Name</a></td>
		<td><a href="#" onclick="TabelleSortieren(2)"><font color="black">Kategorie</a></td>
		<td><a href="#" onclick="TabelleSortieren(3)"><font color="black">Anzahl</a></td>
		<td><a href="#" onclick="TabelleSortieren(4)"><font color="black">Kurs</a></td>
		<td><a href="#" onclick="TabelleSortieren(5)"><font color="black">Gesamtwert</a></a></td>
		<td>Aktion</td>
	</tr>

das scheint ja jetzt einigermaßen zu stimmen, oder?

wie arbeite ich das jetzt wieder in die Tabelle ein?

23 Jerry02

im Moment zeigt mir die Fehlerkonsole das an:

document.getElementById("Tabelle2").childNodes is undefined und bezieht sich damit auf diesen code:

Unsortiert[i - 1]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;

liegt e daran das ich was falsch gemacht hab oder liegt es daran, dass die ausgabe des sortierten arrays noch nicht konfgutriert ist?

bin grad daruaf gestoßen http://tablesorter.com/docs/
aber das ist ja nun wieder was ganz anderes und funktioniert doch bestimmt nicht bei mir oder?
weiß ja nicht was einfacher ist, aber das sieht zwar auf den ersten blick ganz einfach aus, aber ich habe is nicht hinbekommen! werde das jetzt so lassen! oder?

25 Jörg Kruse

Du kannst es auch mit dem jquery Plugin versuchen. Du musst halt wei dort beschrieben die HTML-Tabelle standardkonform mit thead und tbody aufbauen.

Möglicherweise ist das Fehlen von thead und tbody auch der Grund, warum die Funktion TabelleSortieren() childNodes[i] als undefined erkennt. Kindknoten von table sind wohl grundsätzlich tbody, thead - aber nicht tr....

Wenn du Firefox verwendest, solltets du dir Firebug installieren - damit kannst du sehen, wie der Browser den HTMLCode während der Laufzeit verändert. Da sieht man dann auch das tbody und dass die hinzugefügten Tabellenzeilen außerhalb stehen... :-\

26 Jerry02

hm...mir wurde gerade gesagt ich soll das nicht mit jQuery machen! ok hat irgendwie sowieso nicht funktioniert :( so da hab ich jetzt dort weiter gemacht, wo ich aufgehört habe und habe einen tbody hinzugefügt. außerdem hat man mir gesagt ich soll mir mal den sortiealgorithmus von bubble sort ansehen, aber das ist doch so etwas wie in der sortieren funktion steht oder?jetzt sieht mein genzes konstrukt jedenfalls so aus:

<html>
<head>
<title>Portfolio Management System</title>


<script type="text/javascript">


function Aendern () 
	{
		var newDate = new Date();
		var timestamp = newDate.getTime();
		var WKN = document.getElementById('WKN').value;
		var Kurs = document.getElementById('Kurs').value;
		var Name = document.getElementById('Name').value;
		var Stueck = document.getElementById('Stueck').value;
		var Kategorie = document.getElementById('Kategorie').value;
		var Gesamtwert = Stueck*Kurs;
		var Aktion = '<a href="javascript:Kursaendern(' + timestamp + ')">Kurs ändern</a>  <a href="javascript:Anzahlaendern(' + timestamp + ')">Anzahl ändern</a>  <a href="javascript:loeschen(' + timestamp + ')">löschen</a>';
		var newtbody = document.createElement("tbody");
		document.getElementById("Tabelle2").appendChild(newtbody);
		var newTR = document.createElement("tr");
		document.getElementById("Tabelle2").appendChild(newTR);
		document.getElementById("Tabelle2").lastChild.id="tr" + timestamp;
		var newTD1 = document.createElement("td");
		newTD1.innerHTML = '<p id="WKN1">' + WKN + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD1);
		var newTD2 = document.createElement("td");
		newTD2.innerHTML = '<p id="Name1">' + Name + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD2);
		var newTD3 = document.createElement("td");
		newTD3.innerHTML = '<p id="Kategorie1">' + Kategorie + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD3);
		var newTD4 = document.createElement("td");
		newTD4.innerHTML = '<p id="Stueck1">' + Stueck + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD4);
		var newTD5 = document.createElement("td");
		newTD5.innerHTML = '<p id="Kurs1">' + Kurs + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD5);
		var newTD6 = document.createElement("td");
		newTD6.innerHTML = '<p id="Gesamtwert1">' + Gesamtwert + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD6);
		var newTD7 = document.createElement("td");
		newTD7.innerHTML = '<p id="Aktion1">' + Aktion + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD7);
		document.forms[0].reset();
		}

	
function Kursaendern (rowid)
	{
		var Kursaendern = prompt ("Geben Sie bitte den neuen Kurs ein.", "");
		var Kaendern = document.getElementById("tr" + rowid).childNodes[4];
		Kaendern.innerHTML = '<p id="Kurs1">' + Kursaendern + '</p><a href="javascript:Kursaendern(rowid)"></a>';
		var ZelleStueck = document.getElementById("tr" + rowid).childNodes[3].firstChild.innerHTML;
		var kGesamtwert = Kursaendern*ZelleStueck;
		var KUGesamtwert = document.getElementById("tr" + rowid).childNodes[5];
		KUGesamtwert.innerHTML = '<p id="Gesamtwert1">' + kGesamtwert + '</p><a href="javascript:Kursaendern(rowid)"></a>';
	}

function Anzahlaendern (rowid)
	{
		var Anzahlaendern = prompt ("Hier die neue Anzahl eingeben.", "");
		var AZaendern = document.getElementById("tr" + rowid).childNodes[3];
		AZaendern.innerHTML = '<p id="Stueck1">' + Anzahlaendern + '</p><a href="javascript:Anzahlaendern(rowid)"></a>';
		var ZelleKurs = document.getElementById("tr" + rowid).childNodes[4].firstChild.innerHTML;
		var aGesamtwert = ZelleKurs*Anzahlaendern;
		var AZGesamtwert = document.getElementById("tr" + rowid).childNodes[5];
		AZGesamtwert.innerHTML = '<p id="Gesamtwert1">' + aGesamtwert + '</p><a href="javascript:Anzahlaendern(rowid)"></a>';
	}
	
function loeschen (rowid)
	
	{
		var Loeschen = document.getElementById("tr" + rowid);
		document.getElementById("Tabelle2").removeChild(Loeschen);
	}

		
function TabelleSortieren (Spalte)

	{
		function mysort(a, b)
		{
			return a['Wert'] > b['Wert'] ? 1 :
			a['Wert'] < b['Wert'] ? -1 :
			0;
		}
		
		var Anzahl = document.getElementById("Tabelle2").childNodes.length;
		Unsortiert = new Array();
		for (var i = 1 <= Anzahl; i++;) {
			Unsortiert[i - 1] = new Array();
			Unsortiert[i - 1]['Inhalt'] = document.getElementById("Tabelle2").childNodes[i];
			Unsortiert[i - 1]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
		}
		Unsortiert[i - 1].sort(mysort);
	}

</script>

</head>
<body>


<h1>Portfolio Management System</h1>

<form name="Maske">
	<table id="Tabelle1" border="0" cellpadding="0" cellspacing="4">
		<tr>
			<th align="right">WKN:</th>
			<th><input name="WKN" type="text" size="30" maxlenth="30" id="WKN"></th>
			<th align="right">Kurs:</th>
			<th><input name="Kurs" type="text" size="30" maxlenth="30" id="Kurs"></th>
			<th align="left">Euro</th>
		</tr>
		<tr>
			<th align="right">Name:</th>
			<th><input name="Name" type="text" size="30" maxlenth="30" id="Name"></th>
			<th align="right">Stück:</th>
			<th><input name="Stueck" type="text" size="30" maxlenth="30" id="Stueck"></th>
		</tr>
		<tr>
			<th align="right">Kategorie:</th>
			<th><input name="Kategorie" type="text" size="30" maxlenth="30" id="Kategorie"></th>
			<th><input type="button" tabindex="2" value="hinzufügen" onClick="Aendern ();"></th>
		</tr>
	</table>
</form>
<br>
<br>
<br>
<table id="Tabelle2" border="1">
<thead>
	<tr>
		<td><a href="#" onclick="TabelleSortieren(0)"><font color="black">WKN</a></td>
		<td><a href="#" onclick="TabelleSortieren(1)"><font color="black">Name</a></td>
		<td><a href="#" onclick="TabelleSortieren(2)"><font color="black">Kategorie</a></td>
		<td><a href="#" onclick="TabelleSortieren(3)"><font color="black">Anzahl</a></td>
		<td><a href="#" onclick="TabelleSortieren(4)"><font color="black">Kurs</a></td>
		<td><a href="#" onclick="TabelleSortieren(5)"><font color="black">Gesamtwert</a></a></td>
		<td>Aktion</td>
	</tr>
</thead>

		<p id="WKN1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Name1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kategorie1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Stueck1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kurs1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Gesamtwert1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Aktion1"></p>
			<a href="javascript:Aendern()"></a>

	</table>
<br>
<br>
<br>



</body>
</html>

allerdings wird mir jetzt in der fehlerkonsole angezeigt: document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte] is undefined

hm...langsam verlier ich echt den Mut! aber ich muss das hinbekommen.
vielleicht haben sie ja noch eine idee.

27 Jerry02

also firebug ist schon installiert und ich hab mal geguckt und wenn es die function TabelleSortieren () durchläuft dann stoppt es genau nach dieser stelle: Unsortiert[i - 1]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
das verstehe ich aber nicht, weil genau dort, wo Spalte steht, wird auch im firebug angezeigt, dass es z.B. die spalte 4 ist oder so! warum zeigt es dann trotzdem den fehler an, dass diese zeile undefiniert ist?

und wie füge ich das array dann eigendlich wieder in die tabelle ein?

28 Jerry02

bitte helfen sie mir!

29 Jörg Kruse

Was soll dieser Abschnitt:

</thead>

		<p id="WKN1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Name1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kategorie1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Stueck1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kurs1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Gesamtwert1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Aktion1"></p>
			<a href="javascript:Aendern()"></a>

	</table>

Die <p> gehören da nicht hin.

Dann fehlt dir noch der (leere) tbody, in welchem die trs geladen werden sollen. Damit der Bezug zum Elternknoten wieder stimmt, sollte der tbody die ID "Tabelle2" erhalten

<table>
    <thead>
    <!-- Kopfzellen der Tabelle -->
    </thead>
    <tbody id="Tabelle2"></tbody>
</table>

und wie füge ich das array dann eigendlich wieder in die tabelle ein?

Dazu würde ich die vorhandenen trs in einer Schleife rauslöschen (mit removeChild()) und die sortierten trs in einer SChleife einfügen (mit appendChild()); in einem Abwasch geht's vielleicht auch mit replaceChild()

Edit:

Diese Stelle musst du auch noch korrigieren:

Unsortiert[i - 1].sort(mysort);

Du willst ja nicht nur die letzte Zeile, sondern das gesamte Array sortieren

30 Jerry02

oje oje! ich dachte das muss dort hin damit innerHTML funzet! aber du hast mich eines besseren belehrt. nur steht immernoch der fehler da, dass der schon besagte code undefined ist! hm an was könnte das denn liegen?

der code sieht jetzt so aus:

<table border="1">
<thead>
	<tr>
		<td><a href="#" onclick="TabelleSortieren(0)"><font color="black">WKN</a></td>
		<td><a href="#" onclick="TabelleSortieren(1)"><font color="black">Name</a></td>
		<td><a href="#" onclick="TabelleSortieren(2)"><font color="black">Kategorie</a></td>
		<td><a href="#" onclick="TabelleSortieren(3)"><font color="black">Anzahl</a></td>
		<td><a href="#" onclick="TabelleSortieren(4)"><font color="black">Kurs</a></td>
		<td><a href="#" onclick="TabelleSortieren(5)"><font color="black">Gesamtwert</a></a></td>
		<td>Aktion</td>
	</tr>
</thead>
<tbody id="Tabelle2">
</tbody>
	</table>

Edit: also gebe ich dor nur "i" in den Klammern an?

Seite 1 234 5 6..8

nach oben weiter >

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
Lohnt sich ein XAMPP-Update?	Ranma	Webserver und .htaccess	13	27.05.2016 14:19
Doppelte Einträge in normalisierte Datenbanktabellen vermeiden	Ranma	PHP und MySQL	5	11.05.2016 01:50
Passenden Hoster finden	Ranma	Sonstiges	33	01.04.2016 02:30
Normalisierung von Datenbanktabellen	Ranma	PHP und MySQL	63	04.01.2016 01:53
Textdatei nach Datum (erstes Feld) sortieren	webuser	PHP und MySQL	6	19.01.2014 16:08
Neue Tabellenzeile per Klick einfügen	Jerry02	JavaScript	44	24.08.2010 11:10
DB-Datensätze sortieren	AndiN	PHP und MySQL	6	21.01.2009 14:32

Tabelle sortieren [3]

Verwandte Themen