Tabellen sortieren (ASC/DESC)

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

EuroCent

Klappstuhl 2.0
Hallo und Guten Morgen zusammen,

ich habe folgendes Problem bzw. benötige eure Hilfestellung.

Ich habe eine Datei in denen Ich mehrere Tabellen erstellt habe:
HTML:
<!-- Sort: ASC - Standard //-->
<div id="tabellen">
<table id="1"></table>
<table id="2"></table>
<table id="3"></table>
<table id="4"></table>
</div>

Nun möchte Ich mittels einer Select Box, zwischen aufsteigend und absteigend die Tabellen sortieren.
HTML:
<!-- Sort: DESC //-->
<div id="tabellen">
<table id="4"></table>
<table id="3"></table>
<table id="2"></table>
<table id="1"></table>
</div>

So sieht es eigentlich aus:
PHP:
<div id="table-products">
<?php
    require_once 'produkte.php';
?>
</div>

in produkte.php sind eben die Tabellen.

Jetzt fehlt mir allerdings der Ansatz wie Ich diese zum Sortieren bekomme :/
 
PS: Ich habe jetzt genauer gelesen und gesehen, dass Du ja nicht die Spalten in den Tabellen sortieren willst, sondern die Tabellen selber. Das kannst Du mit dieser Funktion erledigen:
Code:
    <!-- Sort: ASC - Standard //-->
    <div id="tabellen">
        <table id="1">
            <tr>
                <td>1</td>
            </tr>
        </table>
        <table id="2">
            <tr>
                <td>2</td>
            </tr>

        </table>
        <table id="3">
            <tr>
                <td>3</td>
            </tr>

        </table>
        <table id="4">
            <tr>
                <td>4</td>
            </tr>
        </table>
    </div>
    <script>
        function sortit(reverse) {
            var nodelist = document.querySelectorAll('#tabellen table');
            var arr = Array.prototype.slice.call(nodelist);
            arr.sort(function (a, b) {
                return parseInt(a.id) - parseInt(b.id);
            });
            if (reverse) arr = arr.reverse();
            arr.forEach(function (item, idx) {
                document.getElementById('tabellen').appendChild(arr[idx]);
            });
        }
        sortit(true);
    </script>
Oder, wenn die Reihenfolge nur einfach umgekehrt werden soll:
Code:
    <button onclick="toggleit();">Reihenfolge umkehren</button>
    <script>
        function toggleit() {
            var nodelist = document.querySelectorAll('#tabellen table');
            for (var i = nodelist.length - 1; i >= 0; i--) {
                document.getElementById('tabellen').appendChild(nodelist[i]);
            }
        }
    </script>
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück