Zur Navigation

Tabelle sortieren [3]

21 Jerry02

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

25.08.2010 11:56

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?

25.08.2010 12:02

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?

25.08.2010 12:16

24 Jerry02

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.08.2010 14:04

25 Jörg

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... :-\

25.08.2010 14:18 | geändert: 25.08.2010 14:23

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.

25.08.2010 15:00

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?

25.08.2010 15:20

28 Jerry02

bitte helfen sie mir!

25.08.2010 15:34

29 Jörg

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

25.08.2010 15:51 | geändert: 25.08.2010 15:55

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?

25.08.2010 16:00 | geändert: 25.08.2010 16:01