diedVIPs

html knowhow

Hintergrundbild fixieren










Hintergrundbild fixieren

So sieht´s aus

Bitte den Hintergrund beachten

Quellcode
<html>
<head>

<style type="text/css">
table#foobar-table {margin-left: 50px;}
table#foobar-table thead {position: sticky;user-select: None;}
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; 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; text-decoration: Underline;}
</style>
</head>

<body>
<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>Hans</td>
<td>Busch</td>
<td>68</td>
</tr>

<tr>
<td>2</td>
<td>Karin</td>
<td>Lieberwirth</td>
<td>64</td>
</tr>

<tr>
<td>3</td>
<td>Monika</td>
<td>Müller</td>
<td>34</td>
</tr>
<tr>
<td>4</td>
<td>Horst</td>
<td>Bauer</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>
</body>

</html>









Kontakt    Datenschutz    Impressum