Hallo, ich komm einfach nicht weiter, kann den Fehler einfach nicht ausmachen in der Tabelle mit 3 Spalten. 1 und 2 Spalte funktioniert so wie es sein soll. Klicke ich auf die 3 Spalte werden die Daten von Spalte 1 und 2 vertauscht. Ich poste mal den Code. Ich bedanke mich schon im Voraus. Habe nachträglich noch den html-Code hinzugefügt.
Code:
var default_order = "asc"; // "asc" || "desc"
var asc_img_uri = "asc.gif";
var desc_img_uri = "desc.gif";
var asc_img_alt_text = "aufsteigend sortiert: ändern in absteigend sortiert";
var desc_img_alt_text = "absteigend sortiert: ändern in aufsteigend sortiert";
var tables = new Array();
var ti = 0;
function sort_table(id) {
this.id = id;
this.obj;
this.tbody_obj;
this.sort_cols = 0;
this.sort_rows = 0;
this.img_ids = new Array();
this.tr_ids = new Array();
this.td_ids = new Array();
this.active_sort_col;
this.active_sort_order = default_order;
}
function init_tabsort(table_id) {
if (!document.getElementById) return;
tables[ti] = new sort_table(table_id);
var t = ti;
ti += 1;
tables[t].obj = document.getElementById(table_id);
for (var i = 0; i < tables[t].obj.childNodes.length; i++) {
switch (tables[t].obj.childNodes[i].nodeName.toLowerCase()) {
case 'colgroup':
for (j = 0; j < tables[t].obj.childNodes[i].childNodes.length; j++)
if (tables[t].obj.childNodes[i].childNodes[j].nodeName.toLowerCase() == 'col')
tables[t].sort_cols += 1;
break;
case 'tbody':
tables[t].tbody_obj = tables[t].obj.childNodes[i];
break;
default:
break;
}
}
var tri = 0;
var tdi = 0;
for (i = 0; i < tables[t].tbody_obj.childNodes.length; i++) {
if (tables[t].tbody_obj.childNodes[i].nodeName.toLowerCase() == 'tr') {
tables[t].tbody_obj.childNodes[i].id = 'tr_' + tri;
tables[t].tr_ids.push('tr_' + tri);
tables[t].sort_rows += 1;
tdi = 0;
for (j = 0; j < tables[t].tbody_obj.childNodes[i].childNodes.length; j++) {
if (tables[t].tbody_obj.childNodes[i].childNodes[j].nodeName.toLowerCase() == 'td') {
tables[t].tbody_obj.childNodes[i].childNodes[j].id = 'tr_' + tri + '_td_' + tdi;
tables[t].td_ids.push('tr_' + tri + '_td_' + tdi);
tdi += 1;
}
}
tri += 1;
}
}
}
function get_sort_table_obj_by_id(id) {
for (var i = 0; i < tables.length; i++)
if (tables[i].id == id)
return (tables[i]);
}
function numsort(a, b) {
return parseFloat(a) - parseFloat(b);
}
function tabsort(table_id, sort_type, col_n) {
if (!document.getElementById) return;
var delimiter = "|||||";
var to = get_sort_table_obj_by_id(table_id);
var sort_array = new Array();
for (var i = 0; i < to.sort_rows; i++) {
tr_array = new Array();
tr_id = 'tr_' + i;
td_id = tr_id + '_td_' + col_n;
tr_array.push(document.getElementById(td_id).innerHTML);
for (var j = 0; j < to.sort_cols; j++) {
if (j == col_n) continue;
else {
tr_id = 'tr_' + i;
td_id = tr_id + '_td_' + j;
tr_array.push(document.getElementById(td_id).innerHTML);
}
}
tr_str = tr_array.join(delimiter);
sort_array.push(tr_str);
}
if (sort_type == 'an')
sort_array.sort();
else if (sort_type == 'n')
sort_array.sort(numsort);
if (to.active_sort_order == 'desc') {
sort_array.reverse();
to.active_sort_order = 'asc';
} else
to.active_sort_order = 'desc';
for (i = 0; i < sort_array.length; i++) {
tr_array = sort_array[i].split(delimiter);
first = tr_array[0];
col = tr_array[col_n];
tr_array[col_n] = first;
tr_array[0] = col;
for (j = 0; j < to.sort_cols; j++) {
tr_id = 'tr_' + i;
td_id = tr_id + '_td_' + j;
document.getElementById(td_id).innerHTML = tr_array[j];
}
}
var img_html;
if (to.active_sort_order == 'asc')
img_html = '<img src="' + desc_img_uri + '" alt="' + desc_img_alt_text + '">';
else
img_html = '<img src="' + asc_img_uri + '" alt="' + asc_img_alt_text + '">';
for (i = 0; i < to.sort_cols; i++) {
if (i == col_n)
document.getElementById(table_id + '_sort_img_' + i).innerHTML = img_html + "";
else
document.getElementById(table_id + '_sort_img_' + i).innerHTML = "";
}
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Tabellen sortieren</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid #999999;
}
th {
vertical-align: middle;
text-align: left;
background-color: #DDDDDD;
border: 1px solid #999999;
padding: 0px;
}
th button {
width: 100%;
background-color: #DDDDDD;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
margin: 0px;
}
td {
font-family: Arial, sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background-color: #FFFFDD;
border: 1px solid #999999;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
}
td.fp {
font-weight: bold;
color: blue;
text-align: center;
}
td.tfoot {
background-color: #DDDDDD;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16px;
}
p {
font-family: Arial, sans-serif;
font-size: 13px;
}
</style>
<script type="text/javascript" src="tabsort.js"></script>
</head>
<body onload="init_tabsort('fettpunkttabelle')">
<h1>Fettpunkte-Tabelle</h1>
<p>Klicken Sie auf die Spaltenüberschriften, um die Tabelle nach der entsprechenden Spalte zu sortieren!</p>
<form action="javascript:void(0)">
<table id="fettpunkttabelle" border="1" summary="
Tabelle, in der für bekannte Nahrungsmittel und Nahrungsmittelgruppen Fettpunktzahlen angegeben werden">
<colgroup>
<col style="width:280px">
<col style="width:200px">
<col style="width:120px">
</colgroup>
<thead>
<tr>
<th>
<button type="button" onClick="tabsort('fettpunkttabelle','an',0)">
<span id="fettpunkttabelle_sort_img_0"></span> Nahrungsmittel
</button>
</th>
<th>
<button type="button" onClick="tabsort('fettpunkttabelle','an',1)">
<span id="fettpunkttabelle_sort_img_1"></span> Nahrungsmittelgruppe
</button>
</th>
<th>
<button type="button" onClick="tabsort('fettpunkttabelle','n',2)">
<span id="fettpunkttabelle_sort_img_2"></span> Fettpunktzahl
</button>
</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Buttermilch</td>
<td>Milch und Milchprodukte</td>
<td class="fp">1</td>
</tr>
<tr>
<td>Fruchtjoghurt 1,5% 150g</td>
<td>Milch und Milchprodukte</td>
<td class="fp">2</td>
</tr>
<tr>
<td>Kräuterquark pikant 100g</td>
<td>Milch und Milchprodukte</td>
<td class="fp">7</td>
</tr>
<tr>
<td>Butterkäse 50%</td>
<td>Käse und Schnittkäse</td>
<td class="fp">6</td>
</tr>
<tr>
<td>Chester 50%</td>
<td>Käse und Schnittkäse</td>
<td class="fp">10</td>
</tr>
<tr>
<td>Bressot 60%</td>
<td>Weichkäse</td>
<td class="fp">10</td>
</tr>
<tr>
<td>Toast Scheiblette 45%</td>
<td>Schmelzkäse</td>
<td class="fp">6</td>
</tr>
<tr>
<td>Feta</td>
<td>Schmelzkäse</td>
<td class="fp">5</td>
</tr>
<tr>
<td>Mozarella 125g 45%</td>
<td>Schmelzkäse</td>
<td class="fp">23</td>
</tr>
<tr>
<td>Beefsteak (Blume) 180g</td>
<td>Fleisch- und Wurstwaren</td>
<td class="fp">9</td>
</tr>
<tr>
<td>Hochrippe 180g</td>
<td>Fleisch- und Wurstwaren</td>
<td class="fp">12</td>
</tr>
<tr>
<td>Rinderbrust 180g</td>
<td>Fleisch- und Wurstwaren</td>
<td class="fp">27</td>
</tr>
<tr>
<td>Rollbraten 180g</td>
<td>Schwein</td>
<td class="fp">19</td>
</tr>
<tr>
<td>Schweinegulasch, mager, 180g</td>
<td>Schwein</td>
<td class="fp">11</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Zuletzt bearbeitet: