sortierbaretabelle.php
Quell Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Sortierbare Tabelle mit Creat Element</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
}
.sortbutton { width:100%;
height:100%;
border: none;
background-color:red;
font: inherit;
color: inherit;
text-align: inherit;
padding: 0;
cursor: pointer;
}
.sortbutton::-moz-focus-inner {
margin: -1px;
border-width: 1px;
padding: 0;
}
</style>
</head>
<body>
<h1>Sortierbare Tabelle</h1>
<h4>Einfach im roten Bereich klicken und die Tabellen werden nach gräße sortiert</h4>
<table id="eins"></table>
<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>GEHT SO NICHT</td>
</tr>
</tfoot>
</table>
</main>
<script>
los();
"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 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) {
return ele.innerHTML;
}
var vglFkt_s = function (a, b) {
var as = a[sortiert],
bs = b[sortiert];
if (as > bs) return 1;
else return -1;
} // vglFkt_s
var tsort = function (sp) {
if (sp == sortiert) arr.reverse(); // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen
else { // Sortieren
sortiert = sp;
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);
// 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]);
arr[z][s] = zi;
}
}
} // 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
function los(){
d1=document.getElementsByTagName('tbody')[0];
for(p=0;p<=10;p++){
var tr = document.createElement("tr");
tr.className="trclass";
tr.id="tr"+p;
d1.appendChild(tr);
for(g=0;g<=4;g++){
//tr1=document.getElementById("tr'+p+'");
var td = document.createElement("td");
td.className="tdclass";
td.id='td'+g;
var min = 1;
var max = 50;
var x = Math.round(Math.random() * (max - min)) + min;
td.innerHTML=x;
tr.appendChild(td);
}
}
}
</script>
</body>
</html>