JavaScript - HTML-Tabelle sortieren
Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend oder aufsteigend sortiert werden.
| Nr. | Vorname | Name | Alter |
|---|---|---|---|
| 1 | Allison | DuBouis | 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>
/* HTML-Tabelle sortieren */
table#foobar-table {
margin-left: 50px;
}
/* Tabellenkopf festsetzen */
table#foobar-table thead {
position: sticky;
inset-block-start: 0;
user-select: none;
}
/* Hintergrund Tabellenkopf */
table#foobar-table > thead > tr {
background-color: rgba(255, 174, 94, 0.8);
}
table#foobar-table > thead > tr > th:hover {
background-color: #FFAE5E;
cursor: pointer;
}
/* Die Spalten der Tabelle anpassen */
table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
border: Solid 1px #888888;
padding: 5px 8px 5px 8px;
color: #000000;
}
/* Spalte in der Tabelle von der Sortierung ausschließen */
table#foobar-table > thead > tr > td {
border: Solid 1px #888888;
padding: 5px 8px 5px 8px;
color: #000000;
font-weight: bold;
text-align: center;
}
/* Den Hintergrund zeilenweise einfärben */
table#foobar-table > tbody > tr:nth-child(even) {
background-color: #FFFFFF;
}
table#foobar-table > tbody > tr:nth-child(odd) {
background-color: #FFD2A6;
}
/* Pfeil nach oben */
.upArrow::after {
content: "\2191";
color: #FFFFFF;
text-shadow: 1px 1px 0px #000000;
position: absolute;
}
/* Pfeil nach unten */
.dnArrow::after {
content: "\2193";
color: #FFFFFF;
text-shadow: 1px 1px 0px #000000;
position: absolute;
}
</style>
<table id="foobar-table">
<thead>
<tr>
<th data-type="number" title="Nach Nummer sortieren">Nr.</th>
<th data-type="string" title="Nach Vorname sortieren">Vorname</th>
<th data-type="string" title="Nach Name sortieren">Name</th>
<th data-type="number" title="Nach Alter sortieren">Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Allison</td>
<td>DuBouis</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, headers) {
const cls = ["upArrow", "dnArrow"];
headers.forEach((header) => {
document.getElementById(header.id).classList.remove(...cls);
});
const direction = directions[index] || "asc";
const multiplier = (direction === "asc") ? 1 : -1;
const cssSort = (direction === "asc") ? cls[0] : cls[1];
document.getElementById(index).classList.add(cssSort);
const newRows = Array.from(rows);
newRows.sort((rowA, rowB) => {
const cellA = encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase());
const cellB = encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase());
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.setAttribute("id", index);
header.addEventListener("click", () => {
sortColumn(index, headers);
});
});
</script>
Die Tabelle muss die Bereiche <thead> und <tbody> beinhalten.
Tabellenspalten die Zahlen enthalten werden mit: data-type="number" und Wörter mit: data-type="string" gekennzeichnet.
Spalte in der Tabelle von der Sortierung ausschließen
Ersetzen Sie im Tabellenkopf zum Beispiel:
<th data-type="number" title="Nach Alter sortieren">Alter</th>
durch:
<td>Alter</td>
Format von Datumsangaben
Damit Datumsangaben richtig sortiert werden können, müssen diese im Format:
JJJJ-MM-DD (Beispiel: 2023-01-28) eingetragen werden.
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<head> Kopfdaten
CSS - Kalender Symbol neben dem Datepicker
PHP - Einbindung einer Datei je nach gewählter Auswahl
JavaScript - HTML-Details automatisch schließen
MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array