• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabellen-Sortierung

TYPE

New member
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:
Zurück
Oben