Hallihallo, bin wieder zu Hause und alles gut !!
Hallo Helge,
hier mal alle Codes vom Tabellenblock. Sind noch 3 Bücher drin, Auch diese Hoovergeschichte für die Buchcover- musste dann halt rauslöschen
Hier der HTML-Teil:
Code: Alles auswählen
<meta charset="UTF-8">
<title>Sortierbare Tabelle mit Popup</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.search-box {
max-width: 300px;
position: relative;
}
.search-box i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #888;
}
.search-box input {
padding-left: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ccc;
}
th {
cursor: pointer;
background: #f8f8f8;
}
th.asc::after { content: " ▲"; }
th.desc::after { content: " ▼"; }
.popup {
position: fixed;
top: 50%;
left: 50%;
width: 450px;
height: 400px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border-radius: 8px;
padding: 10px;
display: none;
z-index: 1000;
transform: translate(-50%, -50%);
}
.popup img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 10px auto;
}
.popup p {
font-size: 0.1rem;
line-height: 1.4;
text-align: center;
word-wrap: break-word;
}
</style>
<div id="mybox" class="box">
<div class="mbr-text mbr-fonts-style">
<!-- Suchfeld -->
<div class="d-flex justify-content-end mb-3">
<div class="search-box">
<i class="fa fa-search" style="font-size:20px;color:orange"></i>
<input type="text" id="searchInput" class="form-control" placeholder=" Suchbegriff eingeben...">
</div>
</div>
<!-- Tabelle -->
<table id="booksTable" class="table table-striped table-hover tablehead">
<thead>
<tr>
<th class="" scope="col">Vorname</th>
<th class="" scope="col">Name</th>
<th class="" scope="col">Titel</th>
<th class="" scope="col">Verlag</th>
<th class="" scope="col">ISBN-Nr.:</th>
<th class="" scope="col">Bemerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gerhard</td>
<td>Kerscher</td>
<td>Kuatsu und Akupressur</td>
<td>Eigenverlag Oblinger-Kerscher</td>
<td data-img="https://www.shotokan-karate-dojo-neukirchen.de/buchcover/Kuatsu.png" data-text="">978-3-00-064343-9</td>
<td><a href="https://eigenverlag-oblinger-kerscher.de/" target="_blank">Leseprobe</a></td>
</tr>
<tr>
<td>Dominik</td>
<td>Lutz</td>
<td>Karate Do - Tradition und Innovation</td>
<td>PUKROP-Verlag</td>
<td data-img="https://www.shotokan-karate-dojo-neukirchen.de/buchcover/karate_do.png" data-text="">3-00-009946-8</td>
<td><a href="https://www.amazon.de/Karlheinz-Bartelmann-Waldemar-Kleinow-Hand-Georg/dp/3000099468" target="_blank">Inhaltsangabe</a></td>
</tr>
<tr>
<td>Dominik</td>
<td>Lutz</td>
<td>Enzyklopädie des Shotokan Karate</td>
<td>Schlatt-books</td>
<td data-img="https://www.shotokan-karate-dojo-neukirchen.de/buchcover/schllatt.png" data-text="">3-937745-04-1</td>
<td><a href="https://www.isbn.de/buch/9783937745046/enzyklopaedie-des-shotokan-karate" target="_blank">Inhaltsangabe</a></td>
</tr>
</tbody>
</table>
<!-- Scroll to top -->
<a href="javascript:void(0);" class="text-primary" style="float: right; color: black; padding-right: 50px; padding-bottom: 8px;" onclick="tableScrollTop()">🔝nach oben🔝
<span class="sli-arrow-up-circle mbr-iconfont mbr-iconfont-btn"></span>
</a>
</div>
</div>
<!-- Popup -->
<div id="popup" class="popup">
<img id="popupImage" src="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/hubert_002emueller55_0040gmail_002ecom/userblocks/mobirise4/pro.custom-html_3" alt="Cover">
<p id="popupText"></p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const searchInput = document.getElementById("searchInput");
const table = document.getElementById("booksTable");
const tableRows = table.querySelectorAll("tbody tr");
const popup = document.getElementById("popup");
const popupImage = document.getElementById("popupImage");
const popupText = document.getElementById("popupText");
// Suchfunktion
searchInput.addEventListener("keyup", function() {
const filter = searchInput.value.toLowerCase();
tableRows.forEach(row => {
const text = row.textContent.toLowerCase();
row.style.display = text.includes(filter) ? "" : "none";
});
});
// Sortierfunktion
const headers = table.querySelectorAll("th");
headers.forEach((header, index) => {
header.addEventListener("click", () => {
const rows = Array.from(table.querySelectorAll("tbody tr"));
const asc = !header.classList.contains("asc");
headers.forEach(h => h.classList.remove("asc", "desc"));
header.classList.add(asc ? "asc" : "desc");
rows.sort((a, b) => {
const cellA = a.children[index].textContent.trim().toLowerCase();
const cellB = b.children[index].textContent.trim().toLowerCase();
return asc ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA);
});
rows.forEach(row => table.querySelector("tbody").appendChild(row));
});
});
// Popup bei Hover über 5. Spalte (ISBN)
table.querySelectorAll("tbody td:nth-child(5)").forEach(cell => {
cell.addEventListener("mouseenter", function() {
popupImage.src = cell.dataset.img || "https://via.placeholder.com/450x260?text=Cover";
popupText.textContent = cell.dataset.text || ("Informationen zur ISBN: " + cell.textContent);
popup.style.display = "block";
});
cell.addEventListener("mouseleave", function(e) {
if (!popup.contains(e.relatedTarget)) {
popup.style.display = "none";
}
});
});
popup.addEventListener("mouseleave", function() {
popup.style.display = "none";
});
});
// Scroll-to-top Funktion
function tableScrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
Hier das komplette CSS meines Tabellenblocks:
Code: Alles auswählen
div {
padding: 0px 0;
color: #777;
text-align: center;
width: 100%;
background-color: white;
}
p {
font-size: 60px;
color: #777;
}
.ausrichtung {
text-align: right;
}
a {
color: black;
}
.scroll-top-link {
float: right;
color: black; /* Textfarbe */
}
th {
background-color: #f9934c;
color: black;
font-weight: 500;
padding-left: 50px;
}
tr {
color: black;
font-size: 17px;
}
div.box {
height: 70vh;
max-height: 90vh;
min-height: 400px;
overflow-y: scroll;
resize: vertical;
background-color: white;
}
table.tablehead th {
position: sticky;
top: 0;
z-index: 2;
color: #ffffff;
background-color: #f9934c;
}
img {
width: 300px;
height: auto;
}
input {
background-color: white;
}
/* Firefox */
* {
scrollbar-color: #f9934c #cccccc;
}
/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
width: 12px !important;
}
*::-webkit-scrollbar-track {
background: #bde5f9 !important;
}
*::-webkit-scrollbar-thumb {
background-color: #0d5072 !important;
border-radius: 20px !important;
border: 2px solid white;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 450px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border-radius: 8px;
padding: 10px;
display: none;
z-index: 1000;
transform: translate(-50%, -50%); /* Zentrierung */
}
.popup img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 10px auto;
}
.popup p {
font-size: 0.01rem;
line-height: 0.2;
text-align: center;
word-wrap: break-word;
color: white;
}
Und das hier in den End of <body> code:
Code: Alles auswählen
<script src="./tablesort/TableSort.js"></script>
<!-- Scroll-To-Top of table div box -->
<script>
function tableScrollTop() {
const element = document.getElementById('mybox');
element.scroll({
top: 0,
behavior: 'smooth'
});
}
</script>
Ich hoffe das hilft Dir - wenn Du noch Frage hast melde Dich einfach
Viel Erfolg und Grüße
Hubert
