Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS "nth-child(odd)" vs. "display:none"

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] CSS "nth-child(odd)" vs. "display:none"

    Hallo,

    ich habe eine Tabelle bei der jede zweite Zeile abwechselnd eine andere Farbe hat.

    CSS:
    PHP-Code:
    table tr td{background:#F4F4F4}
    table tr:nth-child(oddtd{background:#D4D4D4}
    tr:hover td{background-color:#ffffff!important}
    .none{display:none
    Zusätzlich habe ich ein JS/jQuery-Script, welches je nach Auswahllister diverse Zeilen ausfiltert, verschwinden lässt:

    JAVASCRIPT:
    PHP-Code:
    function filterEvent(){
        $(
    'tbody tr.none').removeClass('none');
        if ($(
    '#filterLister').val()=='@ll@'){
            return;
        }
        $(
    'tbody tr').each(function(){
            if (!$(
    this).hasClass($('#filterLister').val())){
                $(
    this).addClass('none');
            }
        });    

    Funktioniert soweit alles super,
    ABER:
    wenn jetzt Zeilen ausgefiltert sind, funktioniert das mit der CSS-Farbe nicht mehr, weil er die "display:none"-Felder trotzdem bei der CSS-Regel - jedes zweite Feld in der Berechnung anscheinbar berücksichtigt?!

    Gibts es noch eine andere Möglichkeit, ein Object so zu verstecken, dass es dann aus dieser Zählung rausfliegt?

    Felder via jquare removen kommt hier leider nicht in frage, weil ich sie bei der Änderung der Filterung nicht mit Ajax neu laden möchte. Also wäre schon schön, wenn das mit Unsichtbarkeit ginge.

    Ich hatte erst überlegt, selbst eine jQuery Funktion zu schreiben, die dann halt entsprechende Farb-Klassen foreach an die Zeilen verpasst, nachdem das Ausblenden der Zeilen durchgelaufen ist.

    Aber manche Tabellen haben Tausende Zeilen, da wäre das ziemlich performance-lastig ...

    Jemand ne Idee, wie man das noch lösen kann?

  • #2
    Ja. Kurze version: Datatables nutzen.

    Lange version: Du kannst natürlich hingehen und den tr's die ausgeblendet (!) werden eine klasse zuzuweisen.

    Code:
    table .tr:nth-child(odd):not(.ausblendet) td
    {
        background: ...
    }
    macht dann den Rest.
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar


    • #3
      Zitat von tr0y Beitrag anzeigen
      Lange version: Du kannst natürlich hingehen und den tr's die ausgeblendet (!) werden eine klasse zuzuweisen.
      Code:
      table .tr:nth-child(odd):not(.ausblendet) td
      {
          background: ...
      }
      macht dann den Rest.
      Erstmal vielen Dank. Das Ausblenden geschieht ja über eine Klasse, nämlich :
      PHP-Code:
      .none{display:none
      jedoch dieses :not wirkt sich bei mir im FireFox und GChrome nicht aus.
      PHP-Code:
      table tr:nth-child(odd):not(.nonetd{background:#F4F4F4} 

      Kommentar


      • #4
        hmm.. drehs mal um

        Code:
        table tr:not(.none):nth-child(odd) td{background:#F4F4F4}
        [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

        Kommentar


        • #5
          Okay, scheinbar exkludiert CSS da nicht wirklich. Bleibt nur noch das handling über datatables das automatisch die tr's arrangiert und sie löscht statt auszublenden.

          Du kannst das natürlich auch selbst implementieren, da rate ich aber in minimum zu ractive.js
          [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

          Kommentar


          • #6
            Blöde Geschichte, wird mit CSS so nicht funktionieren.

            Hier muss man mal wieder in die Trickkiste greifen und die russische Holzhammermethode verwenden.

            http://jsfiddle.net/Lmhskkv4/

            noch ein kleines

            Code:
            table tr td{padding-top:4px;}
            dahinter, dann sitzt es schön in der Mitte

            Kommentar


            • #7
              Zitat von tr0y Beitrag anzeigen
              hmm.. drehs mal um

              Code:
              table tr:not(.none):nth-child(odd) td{background:#F4F4F4}
              tja, das hat also leider auch nix genützt...


              Hier übrigens mal das Beispiel wie es in vereinfachter Form aussieht - um das Problem am deutlichsten zu beschreiben:
              Wenn z.B. per jquery die dritte Zeile ausgeblendet wird, rutscht die vierte nach oben, behält aber die falsche Farbe...

              http://jsfiddle.net/6mmfu1q8/4/

              Danke auch für den Tipp mit ractive.js...
              schau ich mir an - mit den unterschiedlichen Zeilenfarben sollte eigentlich ein NiceToHave werden und kein Tagesaufwand aber wie das eben so ist, mit dem Verzetteln beim einbauen von kleinen Features, nech?!

              Kommentar


              • #8
                Naja, blende halt nicht aus sondern lösche die Zeile. Datatables kann das automatisiert für eine Datenmenge. Mit Ractive.js kannst du so schnell listen wiederherstellen indem du halt nur daten an ractive übergibst und danach die tabelle "anpasst".
                [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                Kommentar


                • #9
                  Zitat von tr0y Beitrag anzeigen
                  Naja, blende halt nicht aus sondern lösche die Zeile. Datatables kann das automatisiert für eine Datenmenge. Mit Ractive.js kannst du so schnell listen wiederherstellen indem du halt nur daten an ractive übergibst und danach die tabelle "anpasst".
                  Danke!

                  Kommentar


                  • #10
                    Die Frage ist, ob man sich das wirklich für einzeilige Tabellen antut. Hier reicht es tatsächlich den Hintergrund zu formatieren. Mit einzeilig meine ich gleiche Höhe je Zeile...

                    Kommentar


                    • #11
                      Also für meine Zwecke ist es zu aufwändig,
                      daher habe ich nun eine jQuery-Function gebastelt, die sowohl beim Starten als auch beim späteren Ausblenden nachträglich eben alle Zeilen neu durchläuft und entsprechende Farbklassen verteilt...

                      Das Script hab ich bei jsfiddle in Version 9 angepasst und da funktionierts nun mit meiner Funktion, ohne Zeilen aus dem DOM zu entfernen...
                      Falls es mal jemand gebrauchen kann, hier der Code.

                      http://jsfiddle.net/6mmfu1q8/9/

                      Kommentar

                      Lädt...
                      X