Tabellenbereiche ausklappen mit Javascript?
Guten Tag,
ich möchte Tabellenbereiche ausklappen. Kenne mich mit Javascript überhaupt nicht aus darum suchte ich nach einer Lösung im Internet. Ich fand folgendes:
<script type="text/javascript">
var angezeigt = false;
function versteckt() { if (angezeigt) { document.getElementById('ghost').style.display = 'none'; angezeigt = false; } else { document.getElementById('ghost').style.display = 'block'; angezeigt = true; } }
</script>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>
Dieser Bereich ist sichtbar (immer).
<br><br>Und <a href="#" onclick="versteckt()"> hier</a> blenden wir einen "versteckten" Bereich ein und aus!
</td>
</tr>
<tr>
<td style="display : none" id="ghost">Dieser Bereich kann ein-/ausgeblendet werden!</td>
</tr>
</table>
Nun gebe ich mit einer while Schleife in php mehrere Tabellenzeilen aus. Zu jeder Zeile möchte ich gern per Link eine weitere Zeile ausgeben und auch wieder schließen lassen. Mit dem hier vorliegenden ist es nicht möglich es öffnet sich nur die erste Zeile.
Da ich von Javascript nichts verstehe frage ich euch was ich hier ändern müsste?
Vielen Dank im Voraus
2 Antworten
<!doctype html>
<script>
function show(element) {
x = document.getElementById(element);
if(x.style.visibility === 'visible') {
x.style.visibility = 'collapse';
} else {
x.style.visibility = 'visible';
}
}
</script>
<style>
.collapse { visibility:collapse }
</style>
<table>
<tr>
<td>
<p>Dieser Bereich ist sichtbar (immer).</p>
<p>Und <a href="#" onclick="show('ghost')"> hier</a> blenden wir einen "versteckten" Bereich ein und aus!</p>
</td>
</tr>
<tr class="collapse" id="ghost">
<td>
<p>Dieser Bereich kann ein-/ausgeblendet werden!</p>
</td>
</tr>
</table>
Alex
Deine HTML-Tabelle sollte bspw. so aussehen:
<table id="table">
<tr>
<td>
<button data-index="1" type="button">Show / Hide</button>
</td>
</tr>
<tr class="spoiler1 hidden">
<td>Dieser Bereich kann ein-/ausgeblendet werden!</td>
</tr>
</table>
Zum Ein-/Ausklappen wird ein Button verwendet. Dieser hält ein data-Attribut, in dem der Spoiler-Index steht, der später auf/zugeklappt werden soll. Die Tabellenreihe, die ausgeblendet werden soll, wird mit zwei CSS-Klassen ausgestattet. Einmal spoiler<Index> und dann einer Klasse, um den Zustand abzubilden.
Der script-Block darunter:
<script>
var table = document.getElementById("table");
function toggleVisibility(element) {
var index = element.getAttribute("data-index");
var sibling = table.querySelector(".spoiler" + index);
if (sibling) {
sibling.classList.toggle("hidden");
}
}
var buttons = table.querySelectorAll("button");
for (let i = 0; i < buttons.length; ++i) {
buttons[i].addEventListener("click", (e) => toggleVisibility(e.currentTarget));
}
</script>
Ich hole mir hier pauschal alle Buttons, die es in der Tabelle gibt und iteriere über sie drüber, um jedem einzelnen Button einen Listener für das Klickevent anzuhängen.
Der Index wird aus dem data-Attribut gelesen und der zugehörige Spoiler ermittelt. Wenn das Element existiert, kann seine Zustandsklasse entfernt (wenn bereits existent) oder zugefügt werden.
Ein Fiddle dazu: http://jsfiddle.net/b1g7ct3u/ (vorerst habe ich nur grob die Funktionalität getestet).
Mit PHP brauchst du nur das Markup für die Tabelle rendern. Da du mit einer Schleife arbeitest, sollte es leicht fallen, den Index je Zeile richtig zu setzen.
Zu guter Letzt noch die Definition des Klassenselektors hidden:
.hidden {
display: none;
}
