Suche auf lima-city
-
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
Hallo prinz-und-gloeckner,
du magst mit deinen Behauptungen ja recht haben, nur habe ich jetzt dank fuerderer schon ein fertiges Script, welches ich nur noch auf meine Bedürfnisse erweitern muss und es funzt. Alle anderen Versionen, ob nun per Button, per Ratio oder anderen Methoden kommen später.
Trotzdem Danke dir für die Infos.
Beste Grüße
Wado -
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
Hi @ all,
fuerderer schrieb:
Beim letzten Fiddle ist mir wohl ein Fehler unterlaufen. Einige meiner Änderungen waren nicht gespeichert.
Das Beispiel was du nennst, ist kein Problem für das Dropdown-Menü. Du kannst jeden Menüpunkt frei konfigurieren und einstellen, welche Zeilen genau angezeigt werden sollen.
Um das besser zu demonstrieren, habe ich das Beispiel nochmal etwas erweitert:
https://jsfiddle.net/jzkeL5p9/48/
Vielleicht verstehe ich das genaue Problem noch nicht, wieso das Dropdown-Menü nicht zielführend sein soll.
Also ein Problem ist es nicht. Ich fand aber eine saubere Anordnung von Buttons als übersichtlicher. Dadurch, dass es 40 Auswahlmöglichkeiten gibt, wird die Scrollleiste sehr lang. Trotzdem werde ich eine Testversion mit Dropdowns schreiben und alles andere ganz in Ruhe weiter probieren.
Vielen Dank für deine Arbeit. Gefällt mir auch ohne Buttons :)
prinz-und-gloeckner schrieb:
Als zugängliche und einfache Alternative empfehle ich mal:
Ein Formular anbieten, wo ausgewählt werden kann, was dargestellt werden kann.
Das Formular wird an ein PHP-Skript gesendet, welches die Ausgabe passend zusammenstellt und wieder ausgibt.
So wird jeweils uninteressanter Inhalt gar nicht erst ausgegeben und die Methode funktioniert unabhängig von der Skriptfähigkeit beim jeweiligen Nutzer.
Dadurch das ich mich mit js sowieso Beschäftigen möchte und von PHP noch weniger Ahnung habe lasse ich davon lieber die Finger. Ich verstehe ja noch nicht einmal was du meinst ;)
Beste Grüße
Wado -
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
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
-
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
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 -
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
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
-
in: Tabellenreihen per Klick ein-/ausblenden Javascript
geschrieben von wadolowski
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