• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen - sort() -

Status
Für weitere Antworten geschlossen.
A

Ay Chiquita

Neues Mitglied
Hallo!

Ich habe mich nach meinem letzten Post (hier) mal selbst an eine Tabelle gewagt, deren Zeilen man entweder nach Nummern oder nach Buchstaben sortieren kann. Doch wider Erwarten (-.-) funktionierte es nicht. Bitte lacht nicht - Ich habe relativ wenig Ahnung von dem, was ich da eigentlich geschrieben habe, doch dachte ich mir, dass es gemäß der selfhtml-Vorlage (hier) so klappen sollte! Der Code:

HTML: 
<html><head><title>Test</title>
<script type="text/javascript">
var Art = "ABC";
var Art = "NUM";

function ABC () {
  if (Art == "ABC")
    return;
  Art = "ABC";
  var Buchstaben = new Array();
  for (var i = 0; i < document.getElementsByTagName("tr").length; i++)
    Buchstaben[Buchstaben.length] = document.getElementsByTagName("tr")[i].firstChild.nodeValue;
  Buchstaben.sort();
  for (i = 0; i < document.getElementsByTagName("tr").length; i++)
    document.getElementsByTagName("tr")[i].firstChild.nodeValue = Buchstaben[i];
  document.getElementById("Art").firstChild.nodeValue = "Buchstaben";
}

function NUM () {
  if (Art == "NUM")
    return;
  Art = "NUM";
  var Zahlen = new Array();
  for (var i = 0; i < document.getElementsByTagName("tr").length; i++)
    Zahlen[Zahlen.length] = document.getElementsByTagName("tr")[i].firstChild.nodeValue;
  Zahlen.sort(Numsort);
  for (i = 0; i < document.getElementsByTagName("tr").length; i++)
    document.getElementsByTagName("tr")[i].firstChild.nodeValue = Zahlen[i];
  document.getElementById("Art").firstChild.nodeValue = "Zahlen";
}
</script>

</head><body>

<table>
<tr>
<td>C</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>1</td>
</tr>
<tr>
<td>B</td>
<td>3</td>
</tr>
</table>


Ordnen nach ...
<form name="Formular" action="">
<input type="button" name="abc" value="Buchstaben" onctdck="ABC()">
<input type="button" name="num" value="Zahlen" onctdck="NUM()">
</form>

</body></html>
Wo verstehe ich es nicht (mehr)? Danke bereits im Voraus!
 
also alphabetisch hab ich es hingekriegt die zu ordnen:


~~~code entfernt, siehe unten~~~


nur wirst du beim ergebnis sehen, dass zuerst die zahlen kommen, und dann die buchstaben. den teil, in dem man nach zahlen sortiert hab ich rausgenommen, weil das nicht funktionieren kann, und das ja jetzt schon nach zahlen sortiert ist.

oder meinst du, dass die ganze zeile sortiert werden soll? wenn das so ist, dann muss ich mich heute nachmittag nochmal ans script setzen.

/E: ok, das was ich grade eben oben gepostet habe ist absoluter stuss, das macht gar keinen sinn das zu benutzen. hier ist schonmal das script, welches nach buchstaben sortiert:

ich werde das ganze später noch verbessern, damit du evtl. nur eine funktion brauchst, und dann nur eine variable an die funktion übergeben musst um das zu sortieren.
 
Zuletzt bearbeitet von einem Moderator:
Hi Commodore,

danke für die Mühe, die du dir gemacht hast. Ich bin bereits einen wesentlichen Schritt weiter. Doch ich denke, ich habe noch nicht ganz deutlich gemacht, was das eigentlich für eine Tabelle sein soll. Deswegen mal ein "fiktives" Beispiel:

screen.JPG


Diese Tabelle kann man sowohl nach Titel (nach dem Alphabet) oder nach Seeder/Leecher (nach Zahlen) ordnen, undzwar aufsteigend (z.B. oben "A.." / "0") oder absteigend (z.B. oben "Z.." / "999"). Natürlich bleiben die Zeilen dieselben, nur kann man sie nun nach insgesamt 4 Möglichkeiten ordnen lassen. Wie macht man soetwas? Ich suche nun schon so lange nach einer solchen Sache .. Wäre euch wirklich wahnsinnig dankbar!
 
ja, was du meinst hab ich schon verstanden, als ich den post editiert habe (hoffe ich zumindest)

also hier mein verbessertes script:

~~~ code entfernt, siehe unten ~~~


an die funktion ABC() übergibst du eine variable welche die spalte der tabelle bestimmt, nach welcher sortiert werden soll (buchstabe = 0 , zahl = 1 , name = 2 , job = 3 usw.)

du kannst beliebig viele zellen hinzufügen, aber musst eines beachten:

du musst immer zu jeder spatle ein th da sein, und es darf auch kein th zu viel da sein (sonst funktioniert das ganze script nicht) und in jeder zelle muss etwas stehen (auch wenn es nur &nbsp; ist) da es dann ebenfalls nicht funktionieren wird. außerdem solltest du bei zahlen immer darauf achten, eine null davor zu schreiben, falls es eine zahl mit einer stelle mehr gibt(also wenn es 1 und 10 gibt, dann schreibst 01 und 10 oder wenn es 1432 und 6 gibt, dann schreibst du 1432 und 0006) sonst wird es nicht richtig sortiert.

ps: bitte nicht fragen, wie das script funktioniert, ich hab durch die vielen variablen, arraylängen und verschachtelungen mittlerweile selber vergessen, wie es funktioniert :lol:
 
Zuletzt bearbeitet von einem Moderator:
Danke, Commodore, genau so meint ich es doch :P

Nun habe ich noch eine letzte Frage: Nunmal angenommen, die Liste wird länger und länger, werde ich wahrscheinlich irgendwann die Tabelle teilen müssen. So wie bei "Suchergebnissen" Seite 1, 2, 3 ...

Trotzdem soll diese Funktion des "Ordnen nach ..." bleiben - geht soetwas? Sodass sich sozusagen dynamisch der zweite Teil der Tabelle, der auf einer anderen Seite steht, ändert?
 
Ay Chiquita schrieb:
Danke, Commodore, genau so meint ich es doch :P

Nun habe ich noch eine letzte Frage: Nunmal angenommen, die Liste wird länger und länger, werde ich wahrscheinlich irgendwann die Tabelle teilen müssen. So wie bei "Suchergebnissen" Seite 1, 2, 3 ...

Trotzdem soll diese Funktion des "Ordnen nach ..." bleiben - geht soetwas? Sodass sich sozusagen dynamisch der zweite Teil der Tabelle, der auf einer anderen Seite steht, ändert?
Zum Vergrößern anklicken....

nein, das geht nicht. maximal könntest du das mit frames machen, und dann den inhalt von einer seite in den frame zwischenspeichern, aber das macht wohl wenig sinn, und macht das ganze nur noch komplizierter. es war schon schwierig genug das momentane zu scripten. du kannst ja wenn du willst eine lange tabelle machen, und bei klick auf einen button wird das untere ende ausgeblendet/ eingeblendet.
 
Soetwas geht? Wow .. wie? (Ich krieg schon ein schlechtes Gewissen .. So langsam sollte ich dir Geld bezahlen für deine rund-um-die-Uhr Dienste :P)
 
puh, ist ja schon richtig anstrengend hier... ;-) :lol:

also ich würde es wie folgt machen:

zunächst hast du ein fenster mit 2 frames, im oberen ist die erste hälfte der tabelle, und das script, welches ich geschrieben habe. unten ist die andere hälfte. wenn man nun alles sortieren will, dann wird der teil, der in der unteren hälfte ist an den oberen angehägt, die funktion wird ausgeführt, und als letzten schritt werden alle teile der tabelle, die im oberen teil nicht mehr zu sehen sein sollen in den unteren frame gepackt. wenn man zudem auf einen button klickt, dann kann man noch zwischend en teilen der tabelle hin und her wechseln.

solltest du alleine hinbekommen, ist nicht besonders schwer.

wenn dus aber nicht hinbekommst dann mach ichs.

der thread gehört langsam in die jobbörse :-P

/E: so, ich hab jetzt das script ein bisschen verfeinert, jetzt kann man auch entscheidenb, obs von a bis z oder umgekehrt gehen soll:

HTML: 
<html><head><title>Tabellenspalten mit JavaScript sortieren</title>
<style type="text/css">
td {border:1px #000 solid;}
th {text-align:left; border:1px #000 solid;}
table{cellspacing:0px;}
</style>
<script type="text/javascript">
var sorte = new Array();
function ABC (feld) {
var wert = ((document.getElementById('feld').checked == true) ? 1 : -1);
var zelle = document.getElementsByTagName("td");
for(a = 0 ; a < document.getElementsByTagName("th").length ; a++){
sorte[a] = a;
}
var speicher = sorte[0];
sorte[0] = sorte[feld];
sorte[feld] = speicher;
var anfang = new Array();
for (i = 0 , c = 0; i < (zelle.length / sorte.length ) ; i++ , c += sorte.length){
anfang[i] = new Array();
for(j = 0; j < sorte.length ; j++){
anfang[i][sorte[j]] = zelle[c+j].firstChild.nodeValue;
}
}
anfang.sort();
for (i = 0 , j = ((wert < 0) ? anfang.length-1 : 0); i < zelle.length; i += sorte.length , j += wert){
for (d = 0 ; d < sorte.length ; d++){
zelle[i+d].firstChild.nodeValue = anfang[j][sorte[d]];
}
}
}
</script>

</head><body>

<table cellspacing="0">
<tr>
<th>Buchstabe</th>
<th>Zahl</th>
<th>Name</th>
<th>Job</th>
</tr>
<tr>
<td>C</td>
<td>02</td>
<td>stefan</td>
<td>hausmeister</td>
</tr>
<tr>
<td>D</td>
<td>04</td>
<td>heiko</td>
<td>lehrer</td>
</tr>
<tr>
<td>A</td>
<td>01</td>
<td>frank</td>
<td>designer</td>
</tr>
<tr>
<td>B</td>
<td>03</td>
<td>peter</td>
<td>baggerfahrer</td>
</tr>
<tr>
<td>E</td>
<td>10</td>
<td>juergen</td>
<td>programmierer</td>
</tr>
</table>


Ordnen nach ...
<form name="Formular" action="">
<input type="button" name="abc" value="Buchstaben" onclick="ABC(0)">
<input type="button" name="num" value="Zahlen" onClick="ABC(1)">
<input type="button" name="name" value="Name" onClick="ABC(2)">
<input type="button" name="job" value="arbeit" onClick="ABC(3)"><br>
<input type="radio" name="wechsel" checked="checked" id="feld">Von Anfang bis Ende<br>
<input type="radio" name="wechsel" >Von Ende bis Anfang
</form>

</body></html>
damit der thread nicht zu unübersichtlich wird mach ich mal die anderen codes weg.
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben