Zur Navigation

Tabelle sortieren [4]

31 Jörg Kruse

Gib den tbody mal ohne Umbruch oder Leerzeichen ein:

<tbody id="Tabelle2"></tbody>

und hier kannst du auch mit 0 beginnen, da tbody ja keinen header tr hat:

Unsortiert = new Array();
		for (var i = 0; i <= Anzahl; i++;) {
			Unsortiert[i] = new Array();
			Unsortiert[i]['Inhalt'] = document.getElementById("Tabelle2").childNodes[i];
			Unsortiert[i]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
		}
		Unsortiert.sort(mysort);

25.08.2010 16:07 | geändert: 25.08.2010 16:09

32 Jerry02

stimmt jetzt ist ja tbody die tabelle2!
hm...habs grad ausprobiert, aber es wird immernoch angezeigt :(!
was mache ich nur falsch?

Edit: bzw. es wird nur noch das angezeigt: document.getElementById("Tabelle2").childNodes[i] is undefined

und nichtmehr das: document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte] is undefined

25.08.2010 16:13 | geändert: 25.08.2010 16:16

33 Jörg Kruse

Wie sieht der Gesamtcode denn jetzt aus?

ich muss mir das mit Firebug auch nochmal genauer anschauen

25.08.2010 16:16

34 Jerry02

so sieht es bis jetzt 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 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 = 0 <= Anzahl; i++;) {
			Unsortiert[i] = new Array();
			Unsortiert[i]['Inhalt'] = document.getElementById("Tabelle2").childNodes[i];
			Unsortiert[i]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
		}
		Unsortiert[i].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 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>
<br>
<br>
<br>



</body>
</html>

25.08.2010 16:17

35 Jörg Kruse

So sollte die Schleife definiert sein:

for (i = 0; i < Anzahl; i++) {

Die Fehlermeldung mit dem undefined kam wohl wegen des "<=" - dadurch wurde eine Tabellenreihe mehr gesucht als vorhanden war

Die Funktion mysort() würde ich außerhalb von TabelleSortieren() definieren

Und die Sortierung des gesammten Arrays schaut dann so aus:

Unsortiert.sort(mysort);

In Firebug kannst du dir dann unter "DOM" die Sortierung vom Array Unsortiert anschauen (vielleicht solte man noch einen andern Namen wählen - am Ende ist das Array ja sortiert)

25.08.2010 16:39

36 Jerry02

supi bis dahin funzt wieder alles! vielen dank! wo genau sehe ich denn das im DOM? dort steht so viel drin ;)

25.08.2010 16:45

37 Jerry02

ich hab das grade mal aus spaß und zum überprüfen das so hingeschrieben:
		var Sortiert = Unsortiert.sort(Sortierung);
		alert(Sortiert);
und da wird bei alert aber nur ein Komma angezeigt, wenn ich zwei Werte miteinander vergleiche! wenn ich mehrere vergleiche, werden es mehr kommatas! ist das richtig, weil das array nich so einfach ausgegeben werden kann oder stimmt da was nicht?

25.08.2010 16:54

38 Jörg Kruse

wo genau sehe ich denn das im DOM?

Bei mir stand das ganz oben

Wenn du das Array nicht siehst, klick zuerst auf den Spaltenkopf in der Tabelle und dann in Firebug unter DOM auf aktualisieren

Mit alert() kann man wohl kein Array ausgeben und so etwas wie var_dump in PHP gibt es in JavaScript wohl nicht...

25.08.2010 17:18 | geändert: 25.08.2010 17:19

39 Jerry02

ok ich glaub ich habs gefunden! nach dem ganzen prozedere steht bei mir unter DOM:
Unsortiert [[ ], [ ], [ ], 2 more...]
wenn ich dort draufklicke dann kommen die werte!
ich hab gerade mal schnell etwas probiert wo ich dachte, dass es alle werte aus der tabelle löscht!

function TabelleSortieren (Spalte)

    {
        var Anzahl = document.getElementById("Tabelle2").childNodes.length;
        Unsortiert = new Array();
        for (i = 0; i < Anzahl; i++) {
            Unsortiert[i] = new Array();
            Unsortiert[i]['Inhalt'] = document.getElementById("Tabelle2").childNodes[i];
            Unsortiert[i]['Wert'] = document.getElementById("Tabelle2").childNodes[i].childNodes[Spalte].innerHTML;
        }
        Unsortiert.sort(Sortierung);
		
        for (var i = 0; i < Anzahl; i++) {
        var Zeilenloeschen = document.getElementById("Tabelle2").childNodes[i];
            document.getElementById("Tabelle2").removeChild(Zeilenloeschen);
        }

    }

doch irgendwie löscht es nur jede zweite zeile! was hab ich denn da fabriziert?

Edit: Okay hab es glaub ich hinbekommen ich hab einfach anstatt i++ nur i geschrieben! nun werden alle zeilen gelöscht! allerdings sehe ich im firebug, dass das programm die löschen schleife nachdem alle zeilen gelöscht sind weiter durchlaufen lässt und somit dann einen fehler ausgibt.
man müsste ihm also sagen, dass er dann damit aufhören soll wenn alle zeilen weg sind...oder?

25.08.2010 21:13 | geändert: 25.08.2010 21:27

40 Jerry02

mhm...wegen diesem abbruch kann natürlich der aufbau der neuen tabelle nicht von statten gehen, weil es ja davor noch gestoppt wird!

25.08.2010 22:25