JavaScript - HTML-Tabelle sortieren
Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend und aufsteigend sortiert werden.
| Nr. | Vorname | Name | Alter |
|---|---|---|---|
| 1 | Andrea | Ross | 18 |
| 2 | Penelope | Mills | 36 |
| 3 | Sarah | Grant | 14 |
| 4 | Vanessa | Roberts | 27 |
| 5 | Oliver | Alsop | 12 |
| 6 | Jennifer | Forsyth | 7 |
| 7 | Michelle | King | 21 |
| 8 | Steven | Kelly | 55 |
| 9 | Julian | Ferguson | 15 |
| 10 | Chloe | Ince | 23 |
| 11 | Sarah | Myer | 22 |
Siehe auch: HTML-Tabelle filtern, HTML-Tabelle Spaltenbreite anpassen, HTML-Tabelle als CSV-Datei exportieren und Tabellenkalender
<style>
table#foobar-table thead {
position: sticky;
}
table#foobar-table thead {
inset-block-start: 0;
}
table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
border: Solid 1px #888888;
padding: 5px;
}
table#foobar-table > thead > tr {
background-color: #FFAE5E;
cursor: Pointer;
}
table#foobar-table > tbody > tr:nth-child(even) {
background-color: #FFFFFF;
}
table#foobar-table > tbody > tr:nth-child(odd) {
background-color: #FFD2A6;
}
#foobar-table {
margin-left: 50px;
}
</style>
<table id="foobar-table">
<thead>
<tr>
<th data-type="number">Nr.</th>
<th data-type="string">Vorname</th>
<th data-type="string">Name</th>
<th data-type="number">Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
<td>36</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
<td>14</td>
</tr>
</tbody>
</table>
<script>
// HTML-Tabelle sortieren
const table = document.getElementById("foobar-table");
const headers = table.querySelectorAll("th");
const tableBody = table.querySelector("tbody");
const rows = tableBody.querySelectorAll("tr");
const directions = Array.from(headers).map(function(header) {
return "";
});
const transform = function(index, content) {
const type = headers[index].getAttribute("data-type");
switch (type) {
case "number":
return parseFloat(content);
case "string":
default:
return content;
}
};
const sortColumn = function(index) {
const direction = directions[index] || "asc";
const multiplier = (direction === "asc") ? 1 : -1;
const newRows = Array.from(rows);
newRows.sort(function(rowA, rowB) {
const cellA = rowA.querySelectorAll("td")[index].textContent;
const cellB = rowB.querySelectorAll("td")[index].textContent;
const a = transform(index, cellA);
const b = transform(index, cellB);
switch (true) {
case a > b: return 1 * multiplier;
case a < b: return -1 * multiplier;
case a === b: return 0;
}
});
[].forEach.call(rows, function(row) {
tableBody.removeChild(row);
});
directions[index] = direction === "asc" ? "desc" : "asc";
newRows.forEach(function(newRow) {
tableBody.appendChild(newRow);
});
};
[].forEach.call(headers, function(header, index) {
header.addEventListener("click", function() {
sortColumn(index);
});
});
</script>
Tabellenspalten die Zahlen enthalten werden mit: data-type="number" und Wörter mit: data-type="string" gekennzeichnet.
Die Tabelle muss die Bereiche <thead> und <tbody> beinhalten.
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<nav> Navigationsbereich
CSS - Verwendung von Datenattributen (data-*)
PHP - Bild und Bildinformation anzeigen