SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:JS-Anw-sortierbare-Tabellen-3.html
Aus SELFHTML-Wiki
<!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 V3</title>
<style type="text/css">
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 }
</style>
<script>
( function() {
"use strict";
var tableSort = function(tab) {
var titel = tab.getElementsByTagName("thead")[0].getElementsByTagName("tr")[0].getElementsByTagName("th");
var tbdy = tab.getElementsByTagName("tbody")[0];
var tz = tbdy.rows;
var nzeilen = tz.length;
if (nzeilen==0) return;
var nspalten = tz[0].cells.length;
var arr = new Array(nzeilen);
var sortiert = -1;
var sorttype = new Array(nspalten);
var sortbuttonStyle = document.createElement('style'); // Stylesheet für Button im TH
sortbuttonStyle.innerText = '.sortbutton { width:100%; height:100%; border: none; background-color: transparent; font: inherit; color: inherit; text-align: inherit; padding: 0; cursor: pointer; } .sortbutton::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
document.head.appendChild(sortbuttonStyle);
var initTableHead = function(sp) { // Kopfzeile vorbereiten
var b = document.createElement("button");
b.type = "button";
b.className = "sortbutton";
b.innerHTML = titel[sp].innerHTML;
b.addEventListener("click",function() { tsort(sp); },false);
titel[sp].innerHTML = "";
titel[sp].appendChild(b);
}
var getData = function(ele,s) {
var val = ele.textContent; // Nicht im IE8
if(!isNaN(val) && val.search(/[0-9]/)!=-1) return val;
var n = val.replace(",",".");
if(!isNaN(n) && n.search(/[0-9]/)!=-1) return n;
sorttype[s] = "s"; // String
return val;
} // getData
var vglFkt_s = function(a,b) {
var as = a[sortiert], bs = b[sortiert];
if(as>bs) return 1;
else return -1;
} // vglFkt_s
var vglFkt_n = function(a,b) {
return parseFloat(a[sortiert]) - parseFloat(b[sortiert]);
} // vglFkt_n
var tsort = function(sp) {
if(sp == sortiert) arr.reverse(); // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen
else { // Sortieren
sortiert = sp;
if(sorttype[sp] == "n") arr.sort(vglFkt_n);
else arr.sort(vglFkt_s);
}
for(var z=0;z<nzeilen;z++) tbdy.appendChild(arr[z][nspalten]); // Sortierte Daten zurückschreiben
} // tsort
// Kopfzeile vorbereiten
for(var i=0;i<titel.length;i++) initTableHead(i) ;
// Array mit Info, wie Spalte zu sortieren ist, vorbelegen
for(var s=0;s<nspalten;s++) sorttype[s] = "n";
// Tabelleninhalt in ein Array kopieren
for(var z=0;z<nzeilen;z++) {
var zelle = tz[z].getElementsByTagName("td"); // cells;
arr[z] = new Array(nspalten+1);
arr[z][nspalten] = tz[z];
for(var s=0;s<nspalten;s++) {
var zi = getData(zelle[s],s);
arr[z][s] = zi ;
// zelle[s].innerHTML += "<br>"+zi+"<br>"+sorttype[s]; // zum Debuggen
}
}
} // tableSort
var initTableSort = function() {
var sort_Table = document.querySelectorAll("table.sortierbar");
for(var 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>
<h1>Beispiel: Tabellensortierer V3</h1>
<main>
<table class="sortierbar">
<thead>
<tr>
<th>Lfd. Nr.</th>
<th>Name</th>
<th>Punkte</th>
<th>Note</th>
<th>Bemerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Matthias</td>
<td>9</td>
<td>2.5</td>
<td>Normal</td>
</tr>
<tr>
<td>2</td>
<td>Gunnar</td>
<td>12</td>
<td>1.2</td>
<td><b>Fett</b></td>
</tr>
<tr>
<td>3</td>
<td>Christian</td>
<td>8</td>
<td>3.5</td>
<td><i>Kursiv</i></td>
</tr>
<tr>
<td>4</td>
<td>Janosch</td>
<td>11</td>
<td>1,4</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>5</td>
<td>Raoul</td>
<td>10</td>
<td>2.1</td>
<td><b><a href="#">Fetter Link</a></b></td>
</tr>
<tr>
<td>6</td>
<td>Jürgen</td>
<td>7</td>
<td>3.9</td>
<td><h2>Überschrift</h2></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=5>Stand: 1. 11. 15</td>
</tr>
</tfoot>
</table>
</main>
</body>
</html>
