Tabellenreihen per Klick ein-/ausblenden Javascript
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
ausblenden
befehl
beispiel
blocken
button
dank
display
element
fehler
formular
inhalt
modeln
problem
puppe
reihe
tabelle
target
verstecken
zeile
-
Hallo !
Ich habe in etwa so eine HTML Tabelle:
<table border="0"> .... <tr> <td width="29%">Bildurl:</td> <td width="71%"><input type="text" name="bildurl" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild2"> <td width="29%">Weitere Bildurls:</td> <td width="71%"><input type="text" name="bild2" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild3"> <td width="29%"></td> <td width="71%"><input type="text" name="bild3" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild4"> <td width="29%"></td> <td width="71%"><input type="text" name="bild4" size="72" style="width: 600px;" /></td> </tr> <tr> <td width="29%">Zustand:</td> <td width="71%"></td> </tr> <tr> <td width="29%"></td> <td width="71%"></td> </tr> .......
Die Reihen:
<tr id="row_bild2"> <td width="29%">Weitere Bildurls:</td> <td width="71%"><input type="text" name="bild2" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild3"> <td width="29%"></td> <td width="71%"><input type="text" name="bild3" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild4"> <td width="29%"></td> <td width="71%"><input type="text" name="bild4" size="72" style="width: 600px;" /></td> </tr>
will ich mit Javascript bei Klick ein- und ausblenden. Also per Klick einblenden, wenn man dann nochmal klickt ausblenden.
Wie mache ich das? Bei Google habe ich schon lange nach meinem Problem gesucht, aber nichts gefunden.
Könnt Ihr mir helfen?
Beitrag zuletzt geändert: 24.4.2012 17:20:33 von php-oop -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Könnte so funktionieren:
Willst du das auch noch toggeln?<script type="text/javascript"><!-- function show(id) { var element = document.getElementById(id); element.style.display = 'inline'; // oder 'block' ... } function hide(id) { var element = document.getElementById(id); element.style.display = 'none'; } // --></script> Reihe row_bild2 <a href="#" onclick="hide('row_bild2');">verstecken</a> -
hackyourlife schrieb:
Könnte so funktionieren:
Willst du das auch noch toggeln?<script type="text/javascript"><!-- function show(id) { var element = document.getElementById(id); element.style.display = 'inline'; // oder 'block' ... } function hide(id) { var element = document.getElementById(id); element.style.display = 'none'; } // --></script> Reihe row_bild2 <a href="#" onclick="hide('row_bild2');">verstecken</a>
Danke für deine Antwort !
Was ist "toggeln"?
Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:
<tr id="row_bild2"> <td width="29%">Weitere Bildurls:</td> <td width="71%"><input type="text" name="bild2" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild3"> <td width="29%"></td> <td width="71%"><input type="text" name="bild3" size="72" style="width: 600px;" /></td> </tr> <tr id="row_bild4"> <td width="29%"></td> <td width="71%"><input type="text" name="bild4" size="72" style="width: 600px;" /></td> </tr>
Wie kann ich das machen?
EDIT: Ich habe dein Script gerade ausprobiert. Es klappt, das eine Tabellenreihe ausgeblendet wird, aber es sollen die o.g. 3 Reihen ausgeblendet werden.
Und mit Klick auf einen Link sollen die Reihen ein- oder ausgeblendet werden. Nicht nur ausgeblendet.
Beitrag zuletzt geändert: 24.4.2012 18:19:56 von php-oop -
php-oop schrieb:
Wenn du einmal auf den Knopf drückst verschwindet es, beim zweiten Mal erscheint es wieder; das nennt man "toggeln".
Was ist "toggeln"?
php-oop schrieb:
Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:
Also das was du noch haben möchtest:<script type="text/javascript"><!-- var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; function showElement(id) { var element = document.getElementById(id); element.style.display = 'inline'; // oder 'block' ... } function hideElement(id) { var element = document.getElementById(id); element.style.display = 'none'; } function showAll() { for(var i = 0; i < elemente.length; i++) showElement(elemente[i]); } function hideAll() { for(var i = 0; i < elemente.length; i++) hideElement(elemente[i]); } // --></script> Alle <a href="#" onclick="hideAll();">verstecken</a> Alle <a href="#" onclick="showAll();">anzeigen</a> -
hackyourlife schrieb:
php-oop schrieb:
Wenn du einmal auf den Knopf drückst verschwindet es, beim zweiten Mal erscheint es wieder; das nennt man "toggeln".
Was ist "toggeln"?
php-oop schrieb:
Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:
Also das was du noch haben möchtest:<script type="text/javascript"><!-- var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; function showElement(id) { var element = document.getElementById(id); element.style.display = 'inline'; // oder 'block' ... } function hideElement(id) { var element = document.getElementById(id); element.style.display = 'none'; } function showAll() { for(var i = 0; i < elemente.length; i++) showElement(elemente[i]); } function hideAll() { for(var i = 0; i < elemente.length; i++) hideElement(elemente[i]); } // --></script> Alle <a href="#" onclick="hideAll();">verstecken</a> Alle <a href="#" onclick="showAll();">anzeigen</a>
Danke, aber ich will einen Link zum verstecken UND zum anzeigen.
Achso, das ist toggeln
Ja, so will ich es gerne haben.
Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.
Kannst du das Script noch so umbauen? Das wäre nett. -
php-oop schrieb:
Danke, aber ich will einen Link zum verstecken UND zum anzeigen.
Achso, das ist toggeln
Ja, so will ich es gerne haben.
Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.<script type="text/javascript"><!-- var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = 'inline'; // oder 'block' ... else element.style.display = 'none'; } function toggleAll() { for(var i = 0; i < elemente.length; i++) toggleElement(elemente[i]); } // --></script> Alle <a href="#" onclick="toggleAll();">togglen</a> -
hackyourlife schrieb:
php-oop schrieb:
Danke, aber ich will einen Link zum verstecken UND zum anzeigen.
Achso, das ist toggeln
Ja, so will ich es gerne haben.
Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.<script type="text/javascript"><!-- var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = 'inline'; // oder 'block' ... else element.style.display = 'none'; } function toggleAll() { for(var i = 0; i < elemente.length; i++) toggleElement(elemente[i]); } // --></script> Alle <a href="#" onclick="toggleAll();">togglen</a>
Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin? -
php-oop schrieb:
Ok, es war ungetestet und hat 2 Fehler...
Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin?
das ganze Script nochmal, diesmal funktioniert es:<script type="text/javascript"><!-- var elemente = ['row_bild2', 'row_bild3', 'row_bild4']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = ''; // oder 'block' ... else element.style.display = 'none'; } function toggleAll() { for(var i = 0; i < elemente.length; i++) toggleElement(elemente[i]); } // --></script> Alle <a href="#" onclick="toggleAll();">togglen</a> -
hackyourlife schrieb:
php-oop schrieb:
Ok, es war ungetestet und hat 2 Fehler...
Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin?
das ganze Script nochmal, diesmal funktioniert es:<script type="text/javascript"><!-- var elemente = ['row_bild2', 'row_bild3', 'row_bild4']; // hier gehören die Element-IDs rein function toggleElement(id) { var element = document.getElementById(id); if(element.style.display == 'none') element.style.display = ''; // oder 'block' ... else element.style.display = 'none'; } function toggleAll() { for(var i = 0; i < elemente.length; i++) toggleElement(elemente[i]); } // --></script> Alle <a href="#" onclick="toggleAll();">togglen</a>
Hi!
So funktioniert es, danke!
Geht es auch, dass, wenn man auf die Seite kommt, die Felder versteckt sind, nicht schon eingeblendet sind?
Also andersrum als jetzt? -
ja geht wenn du folgendes machst:
<tr style="display:none">
und dann halt statt display:none im javascript block machst!
Lg. -
sawei3 schrieb:
Fast: das Javascript muss so bleiben wie es ist, ansonsten stimmt es...
und dann halt statt display:none im javascript block machst! -
Hallo @ all,
dieser Beitrag hat mir schon sehr geholfen. Ich habe den Code von hackyourlife auf meine Seite angewandt und er funktioniert einwandfrei. Jetzt habe ich aber das Problem, dass ich mehrere Buttons habe, die unterschiedliche Zeilen ausblenden sollen. Mit dem Code theoretisch kein Problem, aber er ändert nur den Style der Zeilen.
Gibt es einen Befehl/Code der die Zeilen vor dem ausführen neuer Befehle erst einmal in den Urzustand versetzt???
Vielen Dank und beste Grüße
-
Was genau ist das Problem? Wenn du für jeden Button eine Liste an id's bereitstellst, sollte alles funktionieren. Oder hast du Zeilen, die von mehr als einem Button betroffen sind?
wadolowski schrieb:
Wenn zu Beginn z.B. alle Zeilen sichtbar waren, dann ist es kein Problem per Skript auch wieder alle sichtbar zu machen.
Gibt es einen Befehl/Code der die Zeilen vor dem ausführen neuer Befehle erst einmal in den Urzustand versetzt???
Wenn du uns Beispielcode zeigst oder hochlädst und verlinkst was du versucht hast, können wir besser helfen. -
Hinsichtlich Zugänglichkeit und Barrierefreiheit scheint es mir deutlich sinnvoller zu sein, daß per Stilvorlage und ohne Java-Script umzusetzen.
Dazu eignet sich gut die Pseudoklasse :target
Ist etwas Ziel eines Verweises, so kann man dies anders dekorieren.
Da es immer nur ein :target gibt, trifft die Dekoration auch nur auf ein Zielelement zu.
Macht man etwas zuvor unsichtbar, so empfiehlt sich da die Kombination mit dem Negations-Selektor.
Also in diesem Falle
tr:not(:target) {display: none}
tr:target {display: table-row}
oder
tr:not(:target) {height: 2em; overflow: auto}
tr:target {height: auto}
Sofern noch andere Tabellen im Dokument sind, die nicht so behandelt werden sollen, wäre zum Beispiel mit der Verwendung einer Klasse (Attribut class) bei den betroffenen Tabellen die Selektivität zu erhöhen:
table.Klapptabelle tr:not(:target) etc
Problematischer wäre es, etwa per :hover Eigenschaften wie die Höhe des Elementes von etwa 1em auf auto zu setzen, um es komplett sichtbar zu machen, weil es bei mobilen Geräten wohl Probleme mit :hover gibt.
Auch bei der Verwendung von Skripten ist natürlich immer darauf zu achten, daß der Inhalt im Anfangszustand komplett sichtbar ist, die Veränderung oder Einschränkung immer mit der gleichen Technik erfolgt.
Also nicht etwa mit CSS etwas erst unsichtbar machen und dann per Skript wieder hervorzaubern.
Da wäre also entweder für beides CSS zu verwenden oder aber die Eigenschaften für unsichtbar/sichtbar werden konsequent per Skript gesetzt.
<a href="#" ...> ist eine fehlerhafte Konstruktion. Nach dem # sollte immer ein existierender Fragmentidentifizierer folgen. Egal was ein Skript da später veranstalten mag, der Verweis muß ohne das Skript eine Funktion haben.
Attribute wie onclick im (X)HTML sind inzwischen auch überholt, diese Ereignissen werden komplett im Skript über das DOM angesprochen, haben also mit dem Inhalt nichts zu tun.
-
Hi @ all,
vielen Dank erstmal für eure schnellen Antworten. Ich versuche mal mein Problem besser in Worte zu fassen.
Ich habe mehrerer Zeilen in einer Tabelle. Ebenfalls habe ich mehrere Buttons die unterschiedliche Zeilen ausblenden sollen.
Hier ein Auszug aus der Tabelle:
<tr> <td colspan='2' class='border1 column2 kopf2'><b>Logistik</b></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'><img class='logo2' style='height: 40px; padding-left: 10px;' src='pictures/bugeleisen.jpg'/></td> </tr> <tr id='fmd'> <td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Damen.gif'/> <b>Model</b></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr> <tr id='fmh'> <td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Herren.gif'/> <b>Model</b></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr> <tr id='fp'> <td colspan='2' class='border1 column2 kopf2'><b>Puppe</b></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr> <tr id='ft1'> <td colspan='2' class='border1 column2 kopf2'><b>Tisch</b></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr> <tr id='ft2'> <td colspan='2' class='border1 column2 kopf2'><b>Tisch</b><br><a class='subtitle'>front & back</a></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr> <tr id='ft3'> <td colspan='2' class='border1 column2 kopf2'><b>Tisch</b><br><a style='font-size: 12px;'>Innenansicht</a></td> <td colspan='1' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='2' class='border1 column2'></td> <td colspan='8' class='border1 column2'></td> <td colspan='1' class='border1 column2'></td> </tr>
Und hier ein Auszug aus dem bestehenden JS:
'use strict'; var LC1AW = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe var LC1CW = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe var LC1DW = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Puppe var LC1AM = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe var LC1BM = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe var LC2A = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe var LC2B = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe var LC2C = ['fmd', 'fp', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model var LC2D = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Puppe
Und der Code für zwei Buttons:
function toggleElement(id) { var element = document.getElementById(id); if (element.style.display === 'none') element.style.display = ''; // oder 'block' ... else element.style.display = 'none'; } function toggleLC1AW() { for(var i = 0; i < LC1AW.length; i++) toggleElement(LC1AW[i]); still.style.display = 'block'; model.style.display = 'block'; puppe.style.display = 'block'; tisch.style.display = 'none'; lege.style.display = 'none'; orbit.style.display = 'none'; cube.style.display = 'none'; look.style.display = 'none'; } function toggleLC1CW() { for(var i = 0; i < LC1CW.length; i++) toggleElement(LC1CW[i]); still.style.display = 'block'; model.style.display = 'none'; puppe.style.display = 'block'; tisch.style.display = 'none'; lege.style.display = 'none'; orbit.style.display = 'none'; cube.style.display = 'none'; look.style.display = 'block'; }
Was soll jetzt passieren:
Dadurch das jeder Button eine andere Zeilenkombination anzeigen soll, soll nach dem Klick eines Buttons soll zuerst alle Tabellenzeilen wieder sichtbar sein und dann entsprechende ausgeblendet.
Bei zwei Tabellenzeilen habe ich das Problem, das ein weiterer Button weitere Details vordefinieren soll.
Beispiel:
Button 1 = Damen
Button 2 = Herren
Button3 = Model
Durch drücken von Button1 + Button3 wird die Zeile Model Damen angezeigt und durch Button2 + Button3 Model Herren.
Ich habe schon vieles Ausprobiert, jedoch ohne Erfolg. Nun ist mein JS Wissen nicht so gut und deshalb hoffe ich auf eure Hilfe.
Beste Grüße
wadolowski
-
Ich habe jetzt auf jsfiddle etwas versucht:
https://jsfiddle.net/jzkeL5p9/13/
Wenn man zuerst auf "Damen" drückt und dann auf "Model", wird die Zeile mit Model (Damen) eingeblendet und die Zeile mit Model (Herren) ausgeblendet. Drückt man zuerst auf "Herren" und dann auf "Model", verhält es sich umgekehrt.
War das so gemeint? -
Hallo fuerderer,
dein Ansatz ist schon fast richtig. Drei kleine Dinge noch:
1. klappt es auch, das die Rheinfolge keine Rolle spielt. Also egal ob man erst Geschlecht und dann Model klickt oder umgekehrt?
2. wie binde ich die restlichen reihen in den model-button ein?
3. Wenn man auf Model klickt sollen erst alle Zeilen sichtbar sein und anschließend entsprechende ausgeblendet.
Zu Punkt 2 werde ich auch selbst Versuche unternehmen, aber es ist mir lieber wenn auch ein Fachmann sich dessen annimmt.
Vielen Dank für das schon geleistete und ein schönes Wochenende
Wado -
So, jetzt habe ich mich nochmal dran gesetzt.
Ich bin der Meinung, mit Dropdown-Menüs kann man das Problem deutlich besser lösen, als mit einfachen Buttons.
Hier kannst du dir das Ganze mal anschauen: https://jsfiddle.net/jzkeL5p9/47/
Punkt 1 hat sich damit in meinen Augen erledigt.
Zu 2: Du siehst beispielsweise unter
im Javascript-Code folgendes:case "Puppe":
modify_all([ ["fmd", false], ["fmh", false], ["fp", true], ["ft1", false], ["ft2", false], ["ft3", false], ["model_choice", false], ]); break;Dabei bedeutet "true", dass das Element eingeblendet wird, bei "false" wird es ausgeblendet. In dem Fall wird also "fp" angezeigt und alles andere ausgeblendet.
Du kannst hier nach Belieben ergänzen, ändern usw.
Zu 3: Bei der aktuellen Lösung musst du eben im zweiten Dropdown-Menü "Alle" auswählen, um bei Model sowohl Damen als auch Herren einzublenden. -
Hallo fuerderer,
vielen Dank für deinen Lösungsvorschlag. Dadurch dass die ganze Geschichte etwas komplizierter ist, kann ich es nur mit Buttons machen. Wie gesagt, gibt es verschiedene Varianten welche Zeilen sichtbar sein sollen und welche nicht.
Ich versuche es mal so zu erklären:
Beim Klick auf Button >>A<<
Zeile 1 = sichtbar
Zeile 2 = unsichtbar
Zeile 3 = unsichtbar
Zeile 4 = sichtbar
Zeile 5 = unsichtbar
Zeile 6 = unsichtbar
Zeile 7 = unsichtbar
Zeile 8 = sichtbar
Beim Klick auf Button >>B<<
Zeile 1 = unsichtbar
Zeile 2 = sichtbar
Zeile 3 = sichtbar
Zeile 4 = unsichtbar
Zeile 5 = unsichtbar
Zeile 6 = sichtbar
Zeile 7 = unsichtbar
Zeile 8 = sichtbar
Beim Klick auf Button >>C<<
Zeile 1 = sichtbar (wenn Button >>Damen<< gedrückt wurde)
Zeile 2 = sichtbar (wenn Button >>Herren<< gedrückt wurde)
Zeile 3 = unsichtbar
Zeile 4 = sichtbar
Zeile 5 = unsichtbar
Zeile 6 = unsichtbar
Zeile 7 = sichtbar
Zeile 8 = unsichtbar
Beim Klick auf Button >>D<<
Zeile 1 = unsichtbar
Zeile 2 = unsichtbar
Zeile 3 = sichtbar
Zeile 4 = unsichtbar
Zeile 5 = sichtbar
Zeile 6 = sichtbar
Zeile 7 = unsichtbar
Zeile 8 = unsichtbar
usw., usw.
Es kommt niemals vor, dass nur eine Zeile angezeigt wird und von diesen Buttons gibt es im Moment 40 an der Zahl und Zeilen zum Ausblenden 16. Somit lässt es sich nicht mit einem Dropdown lösen.
Trotzdem werde ich versuchen, einiges in meinen Code mit einfließen zu lassen. Zum Glück habe ich etwas Zeit bei diesem Projekt, sodass ich mich noch tiefer mit js befassen werde.
Vielen Dank fuederer
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
