kostenloser Webspace werbefrei: lima-city


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'/>&nbsp;<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'/>&nbsp;<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&nbsp;&amp;&nbsp;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

Login zum Webhosting ohne Werbung!