Guten Abend zusammen,
Ich hab' mir anhand einer Vorlage einen JS-Code gebastelt, welcher innherhalb einer HTML-Datei eine Tabelle erzeugt, die per Klick auf einen entsprechenden Button entweder nach Spalte 1 oder Splate 2 (jeweils ab- oder aufsteigend) alphabetisch sortiert wird.
Die Sortierung nach Spalte 1 ("Name") funktioniert einwandfrei, wenn ich nun aber nach Spalte 2 ("Ort") sortieren will, so werden alle Einträge gemischt, kommen mehrfach oder auch garnichtmehr in der Tabbelle vor.
Der gesamte Code lautet wie folgt:
Wäre schön, wenn mir jemand sagen könnte, wo der Fehler liegt.
Vielen Dank und viele Grüße,
Fabian
Achja: In Spalte 1 kommen nur verschiedene Einträge vor, die Einträge in Spalte 2 hingegen können auch in mehreren Zeilen identisch sein.
Ich hab' mir anhand einer Vorlage einen JS-Code gebastelt, welcher innherhalb einer HTML-Datei eine Tabelle erzeugt, die per Klick auf einen entsprechenden Button entweder nach Spalte 1 oder Splate 2 (jeweils ab- oder aufsteigend) alphabetisch sortiert wird.
Die Sortierung nach Spalte 1 ("Name") funktioniert einwandfrei, wenn ich nun aber nach Spalte 2 ("Ort") sortieren will, so werden alle Einträge gemischt, kommen mehrfach oder auch garnichtmehr in der Tabbelle vor.
Der gesamte Code lautet wie folgt:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> #Kopfbereich { position:absolute; top:20px; left:30px; } #Tabelle { position:absolute; top:100px; left:30px; } body { background-color:#FFFFFF; } h1,h2,h3,p,ul,ol,li,td,th { font-family:Arial,sans-serif; color:black; } h1 { font-size:24px; margin-top:4px; margin-bottom:4px; margin-left:6px; } p,ul,ol,li,td,th { font-size:13px; color:#000000; } th,td { padding:1px; } </style> <script type="text/javascript"> <!-- var Tabellendaten = new Array( "Person A", "Ort H", "Person B", "Ort F", "Person C", "Ort F", "Person D", "Ort K", "Person E", "Ort F", "Person F", "Ort J", "Person G", "Ort K" ); var sortierte_Tabellendaten = new Array(Tabellendaten.length); var Spaltenueberschriften = new Array( "Name", "Ort" ); var Spalten = Spaltenueberschriften.length; var Zeilen = Tabellendaten.length / Spalten; var Spaltenueberschriftformatierungen = new Array( "width=\"150\" valign=\"top\" style=\"text-align:left; border:solid 1px #808080\"", "width=\"50\" valign=\"top\" style=\"text-align:left; border:solid 1px #808080\"" ); var Spaltenformatierungen = new Array( "width=\"150\" style=\"text-align:left; border:solid 1px #808080\"", "width=\"50\" style=\"font-family:Courier New,courier; text-align:left; border:solid 1px #808080\"" ); var Spaltensortierungen = new Array( "alphabetisch","alphabetisch" ); var Tabellenformatierung = "border=\"1\" style=\"border:solid 1px #808080\" cellspacing=\"0\""; var Ordinalzahlenspalte = 1; var Ordinalzahlenspaltenformatierung = "width=\"20\" style=\"border:solid 1px #808080\""; var IconNormalAuf = "⇓"; var IconNormalAb = "⇑"; var IconSortiertAuf = "⇓"; var IconSortiertAb = "⇑"; var Sortierzeile = ""; function Erzeuge_Sortierzeile(Nummer,Richtung) { Sortierzeile = "<tr>"; if(Ordinalzahlenspalte) Sortierzeile += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>"; for(var j = 0; j < Spalten; ++j) { Sortierzeile += "<th " + Spaltenformatierungen[j] + ">"; if(Richtung == "aufsteigend" && j == Nummer) { Sortierzeile += IconSortiertAuf + " "; Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a>"; } else if(Richtung == "absteigend" && j == Nummer) { Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a>"; Sortierzeile += " " + IconSortiertAb; } else { Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a> "; Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a><\/td>"; } Sortierzeile += "<\/th>"; } Sortierzeile += "<tr>"; } function Sortiere_nach_Spalte(Nummer,Art,Richtung) { var Spaltendaten = new Array(); var Vergleichsdaten = new Array(); var SortierIndex = new Array(); for(var i = 0; i < Zeilen; ++i) Spaltendaten[i] = Vergleichsdaten[i] = Tabellendaten[i * Spalten + Nummer]; if(Art == "alphabetisch") Spaltendaten.sort(); if(Art == "numerisch") Spaltendaten.sort(Numsort); if(Richtung == "absteigend") Spaltendaten.reverse(); for(i = 0; i < Zeilen; ++i) for(var j = 0; j < Zeilen; ++j) if(Spaltendaten[i] == Vergleichsdaten[j]) SortierIndex[i] = j; var Speicher; for(i = 0; i < Zeilen; ++i) for(j = 0; j < Spalten; ++j) sortierte_Tabellendaten[i * Spalten + j] = Tabellendaten[SortierIndex[i] * Spalten + j]; Erzeuge_Sortierzeile(Nummer,Richtung); Schreibe_Tabelle(sortierte_Tabellendaten); } function Schreibe_Tabelle(Array) { var Tabelleninhalt = ""; Tabelleninhalt += "<table " + Tabellenformatierung + ">"; Tabelleninhalt += "<thead><tr>"; if(Ordinalzahlenspalte) Tabelleninhalt += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>"; for(var j = 0; j < Spalten; ++j) Tabelleninhalt += "<th " + Spaltenueberschriftformatierungen[j] + ">" + Spaltenueberschriften[j] + "<\/th>"; Tabelleninhalt += "<\/tr>"; Tabelleninhalt += Sortierzeile; Tabelleninhalt += "<\/thead>"; Tabelleninhalt += "<tfoot><\/tfoot>"; Tabelleninhalt += "<tbody>"; for(var i = 0; i < Zeilen; ++i) { Tabelleninhalt += "<tr>"; if(Ordinalzahlenspalte) Tabelleninhalt += "<td " + Ordinalzahlenspaltenformatierung + ">" + (i+1) + ".<\/td>"; for(var j = 0; j < Spalten; ++j) Tabelleninhalt += "<td " + Spaltenformatierungen[j] + ">" + Array[i * Spalten + j] + "<\/td>"; Tabelleninhalt += "<\/tr>"; } Tabelleninhalt += "<\/tbody>"; Tabelleninhalt += "<\/table>"; if(document.getElementById) document.getElementById("Tabelle").innerHTML = Tabelleninhalt; else if(document.all) document.all.Tabelle.innerHTML = Tabelleninhalt; else if(document.layers) { document.Tabelle.document.open(); document.Tabelle.document.write(Tabelleninhalt); document.Tabelle.document.close(); } } function Numsort(a,b) { return a-b; } </script> <title>Tabelle</title> </head> <body onLoad="Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);"> <div id="Kopfbereich"> <h1>Teilnehmer</h1> <noscript> <p>Die Daten auf dieser Seite lassen sich nur mit JavaScript-fähigen Browsern und mit eingeschaltetem JavaScript anzeigen!</p> </noscript> </div> <div id="Tabelle"></div> </body> </html>
Vielen Dank und viele Grüße,
Fabian
Achja: In Spalte 1 kommen nur verschiedene Einträge vor, die Einträge in Spalte 2 hingegen können auch in mehreren Zeilen identisch sein.
Comment