Beispiel:JS-Anw-sortierbare-Tabellen.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" /> <title>Beispiel: Tabellensortierter</title> <style> table { border:1px solid black; border-spacing:0px; border-collapse:collapse } table td { border:1px solid black; border-spacing:0px; border-collapse:collapse;padding:3px } table th { border:1px solid black; border-spacing:0px; border-collapse:collapse;padding:3px } table h2 { margin:0 } table caption { padding: 0.5em; text-align: left; font-weight: bold; } table.is_sortable thead th { background-color: lightgray; } </style> <script>
( function() {
"use strict";
const tableSort = function(tab) {
// Kopfzeile vorbereiten const initTableHead = function(sp) { const sortbutton = document.createElement("button"); sortbutton.type = "button"; sortbutton.className = "sortbutton unsorted"; sortbutton.addEventListener("click", function(e) { if(e.detail <= 1) tsort(sp); }, false); sortbutton.innerHTML = "" + sort_hint.asc + "" + "" + sort_hint.desc + "" + tabletitel[sp].innerHTML + sortsymbol; tabletitel[sp].innerHTML = "" + tabletitel[sp].innerHTML + ""; tabletitel[sp].appendChild(sortbutton); sortbuttons[sp] = sortbutton; tabletitel[sp].abbr = ""; tabletitel[sp].setAttribute("aria-sort", "none"); } // initTableHead
// Tabellenfelder auslesen und auf Zahl oder String prüfen const getData = function (ele, col) { const val = ele.textContent; // Tausendertrenner entfernen, und Komma durch Punkt ersetzen const tval = val.replace(/\s/g,"").replace(",", "."); if (!isNaN(tval) && tval.search(/[0-9]/) != -1) return tval; // Zahl sorttype[col] = "s"; // String return val; } // getData
// Vergleichsfunktion für Strings const vglFkt_s = function(a, b) { return a[sorted].localeCompare(b[sorted],"de"); } // vglFkt_s
// Vergleichsfunktion für Zahlen const vglFkt_n = function(a, b) { return a[sorted] - b[sorted]; } // vglFkt_n
// Der Sortierer const tsort = function(sp) { if (sp == sorted) { // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen arr.reverse(); sortbuttons[sp].classList.toggle("sortedasc"); sortbuttons[sp].classList.toggle("sorteddesc"); if(tabletitel[sp].abbr==sort_info.asc) { tabletitel[sp].abbr = sort_info.desc; tabletitel[sp].setAttribute("aria-sort", "descending"); } else { tabletitel[sp].abbr = sort_info.asc; tabletitel[sp].setAttribute("aria-sort", "ascending"); } } else { // Sortieren if (sorted > -1) { sortbuttons[sorted].classList.remove("sortedasc"); sortbuttons[sorted].classList.remove("sorteddesc"); sortbuttons[sorted].classList.add("unsorted"); tabletitel[sorted].abbr = ""; tabletitel[sorted].setAttribute("aria-sort", "none"); } sortbuttons[sp].classList.remove("unsorted"); sortbuttons[sp].classList.add("sortedasc"); sorted = sp; tabletitel[sp].abbr = sort_info.asc; tabletitel[sp].setAttribute("aria-sort", "ascending"); if(sorttype[sp] == "n") arr.sort(vglFkt_n); else arr.sort(vglFkt_s); } for (let r = 0; r < nrows; r++) tbdy.appendChild(arr[r][ncols]); // Sortierte Daten zurückschreiben } // tsort
// Tabellenelemente ermitteln const thead = tab.tHead; let tr_in_thead, tabletitel; if (thead) tr_in_thead = thead.rows; if (tr_in_thead) tabletitel = tr_in_thead[0].cells; if ( !(tabletitel && tabletitel.length > 0) ) { console.error("Tabelle hat keinen Kopf und/oder keine Kopfzellen."); return; } let tbdy = tab.tBodies; if ( !(tbdy) ) { console.error("Tabelle hat keinen tbody."); return; } tbdy = tbdy[0]; const tr = tbdy.rows; if ( !(tr && tr.length > 0) ) { console.error("Tabelle hat keine Zeilen im tbody."); return; } const nrows = tr.length, ncols = tr[0].cells.length;
// Einige Variablen let arr = [], sorted = -1, sortbuttons = [], sorttype = [];
// Hinweistexte const sort_info = { asc: "Tabelle ist aufsteigend nach dieser Spalte sortiert", desc: "Tabelle ist absteigend nach dieser Spalte sortiert", }; const sort_hint = { asc: "Sortiere aufsteigend nach ", desc: "Sortiere absteigend nach ", };
// Sortiersymbol const sortsymbol = '<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 190 110"><path d="M0 0 L50 100 L100 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"/><path d="M80 100 L180 100 L130 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"/></svg>';
// Stylesheets für Button im TH if(!document.getElementById("Stylesheet_tableSort")) { const sortbuttonStyle = document.createElement('style'); const stylestring = '.sortbutton { width: 100%; height: 100%; border: none; background-color: transparent; font: inherit; color: inherit; text-align: inherit; padding: 0; cursor: pointer; } ' + '.sortierbar thead th span.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; white-space: nowrap !important; } ' + '.sortierbar caption span { font-weight: normal; font-size: .8em; } ' + '.sortbutton svg { margin-left: .2em; height: .7em; } ' + '.sortbutton.sortedasc svg path:last-of-type { fill: currentColor !important; } ' + '.sortbutton.sorteddesc svg path:first-of-type { fill: currentColor!important; } ' + '.sortbutton.sortedasc > span.visually-hidden:first-of-type { display: none; } ' + '.sortbutton.sorteddesc > span.visually-hidden:last-of-type { display: none; } ' + '.sortbutton.unsorted > span.visually-hidden:last-of-type { display: none; } '; sortbuttonStyle.innerText = stylestring; sortbuttonStyle.id = "Stylesheet_tableSort"; document.head.appendChild(sortbuttonStyle); }
// Kopfzeile vorbereiten for (let i = 0; i < tabletitel.length; i++) initTableHead(i);
// Array mit Info, wie Spalte zu sortieren ist, vorbelegen for (let c = 0; c < ncols; c++) sorttype[c] = "n";
// Tabelleninhalt in ein Array kopieren
for (let r = 0; r < nrows; r++) {
arr[r] = [];
for (let c = 0, cc; c < ncols; c++) {
cc = getData(tr[r].cells[c],c);
arr[r][c] = cc;
// tr[r].cells[c].innerHTML += "
"+cc+"
"+sorttype[c]; // zum Debuggen
}
arr[r][ncols] = tr[r];
}
// Tabelle die Klasse "is_sortable" geben tab.classList.add("is_sortable");
// An caption Hinweis anhängen
const caption = tab.caption;
if(caption) caption.innerHTML += "
Ein Klick auf die Spaltenüberschrift sortiert die Tabelle.";
} // tableSort
// Alle Tabellen suchen, die sortiert werden sollen, und den Tabellensortierer starten. const initTableSort = function() { const sort_Table = document.querySelectorAll("table.sortierbar"); for (let i = 0; i < sort_Table.length; i++) new tableSort(sort_Table[i]); } // initTable
if (window.addEventListener) window.addEventListener("DOMContentLoaded", initTableSort, false); // nicht im IE8
})();
</script>
</head>
<body>
Beispiel: Tabellensortierer
<main>
Zahlen mit Dezimalkomma
| Vorsilbe | Kurzzeichen | Zehnerpotenz (10 hoch) |
Wert | Zahl |
|---|---|---|---|---|
| Yotta | Y | 24 | Quadrillion | 1 000 000 000 000 000 000 000 000 |
| Zetta | Z | 21 | Trilliarde | 1 000 000 000 000 000 000 000 |
| Exa | E | 18 | Trillion | 1 000 000 000 000 000 000 |
| Peta | P | 15 | Billiarde | 1 000 000 000 000 000 |
| Tera | T | 12 | Billion | 1 000 000 000 000 |
| Giga | G | 9 | Miliarde | 1 000 000 000 |
| Mega | M | 6 | Million | 1 000 000 |
| Kilo | k | 3 | Tausend | 1 000 |
| Hekto* | h | 2 | Hundert | 100 |
| Deka* | da | 1 | Zehn | 10 |
| - | - | 0 | Eins | 1 |
| Dezi* | d | -1 | Zehntel | 0,1 |
| Zenti* | c | -2 | Hundertstel | 0,01 |
| Milli | m | -3 | Tausendstel | 0,001 |
| Mikro | μ | -6 | Millionstel | 0,000 001 |
| Nano | n | -9 | Milliardstel | 0,000 000 001 |
| Piko | p | -12 | Billionstel | 0,000 000 000 001 |
| Femto | f | -15 | Billiardstel | 0,000 000 000 000 001 |
| Atto | a | -18 | Trillionstel | 0,000 000 000 000 000 001 |
| Zepto | z | -21 | Trilliardstel | 0,000 000 000 000 000 000 001 |
| Yokto | y | -24 | Quadrillionstel | 0,000 000 000 000 000 000 000 001 |
| * Die zu Hekto(h), Deka(da), Dezi(d) und Zenti(c) gehörigen Vielfache sind keine Potenzen von 1000 | ||||
<a href="https://de.wikipedia.org/wiki/Vors%C3%A4tze_f%C3%BCr_Ma%C3%9Feinheiten#SI-Pr%C3%A4fixe">Quelle</a>
</main>
</body> </html>
