Tweet
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