JavaScript - HTML-Tabelle sortieren
Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend oder 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 {
margin-left: 50px;
}
table#foobar-table thead {
position: sticky;
inset-block-start: 0;
user-select: None;
}
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;
}
table#foobar-table > thead > tr {
background-color: rgba(255, 174, 94, 0.8);
cursor: Pointer;
}
table#foobar-table > tbody > tr:nth-child(even) {
background-color: #FFFFFF;
}
table#foobar-table > tbody > tr:nth-child(odd) {
background-color: #FFD2A6;
}
table#foobar-table th[data-type="number"]:hover,
table#foobar-table th[data-type="string"]:hover {
cursor: Pointer;
}
.upArrow::after {
content: "\2191";
color: #FFFFFF;
position: absolute;
}
.dnArrow::after {
content: "\2193";
color: #FFFFFF;
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>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, 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 newRows = Array.from(rows);
if (direction === "asc") {
document.getElementById(index).classList.add("upArrow");
}
else {
document.getElementById(index).classList.add("dnArrow");
}
newRows.sort((rowA, rowB) => {
const cellA = rowA.querySelectorAll("td")[index].textContent.toLowerCase();
const cellB = 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>
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.
<base> Basis-URL
CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen
JavaScript - Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste
MySQL - Das Datum und die Uhrzeit der letzten Stunde anzeigen