Klaus: Mehrere Zeilen einer Tabelle animiert aus- und einblende?

Hallo,

ich habe einige Zahlen und Daten tabellarisch aufgelistet, die auch gruppiert sind.
Die sozusagen als Überschrift zu sehende Gruppen-Zeile wird mit einem colspan dargstellt.
Aber auch einzelne TDs können colspan enthalten.
Stellt euch Umsätze pro Kunde und Standort vor, kategorisiert nach Artikelgruppe.

Über einen Klick in diese Gruppenspalte können alle darunter liegenden Zeilen aus- und eingeblendet werden. Dies erreiche ich, indem ich allen datunter liegenden TRs style.display="none" angebe oder eben wieder auf style.display="" setze.

Leider wird das nicht animiert, also hat jemand eine Idee, wie ich das realisieren kann?

Durch die colspan-Verwendung, kann ich die Tabelle nicht einfach durch DIVs mit CSS-Eigenschaft Table etc. ersetzen.

Meine erste Idee ist, die Höhe eines TR auf "0" zu setzen, allerdings müsste ich mir die ursprüngliche Höhe merken und wie sieht es aus, wenn 4 Zeilen animiert auf 0 gesetzt werden? Ich möchte möglichst nur ein zuklappen und nicht 4.

Gibts überhaupt eine Chance das mit eine Tabelle zu realisieren?

Gruß,

Klaus

  1. Hallo Klaus,

    entschuldige, dass mir bei der Anrede gerade spontan ein NDW-Hit von Nickerbocker & Biene aus den 80ern einfällt ... ;-)

    ich habe einige Zahlen und Daten tabellarisch aufgelistet, die auch gruppiert sind.
    Die sozusagen als Überschrift zu sehende Gruppen-Zeile wird mit einem colspan dargstellt.
    Aber auch einzelne TDs können colspan enthalten.
    Stellt euch Umsätze pro Kunde und Standort vor, kategorisiert nach Artikelgruppe.

    Über einen Klick in diese Gruppenspalte können alle darunter liegenden Zeilen aus- und eingeblendet werden. Dies erreiche ich, indem ich allen datunter liegenden TRs style.display="none" angebe oder eben wieder auf style.display="" setze.

    Leider wird das nicht animiert, also hat jemand eine Idee, wie ich das realisieren kann?

    was meinst du mit animiert?

    Durch die colspan-Verwendung, kann ich die Tabelle nicht einfach durch DIVs mit CSS-Eigenschaft Table etc. ersetzen.

    Das wäre IMO auch Unfug. Wenn es um Daten geht, die tatsächlich Tabellencharakter haben, sollte man sie auch als solche auszeichenen.

    Meine erste Idee ist, die Höhe eines TR auf "0" zu setzen, allerdings müsste ich mir die ursprüngliche Höhe merken und wie sieht es aus, wenn 4 Zeilen animiert auf 0 gesetzt werden? Ich möchte möglichst nur ein zuklappen und nicht 4.

    Gibts überhaupt eine Chance das mit eine Tabelle zu realisieren?

    Wie wäre es mit mehreren tbody-Elementen, die du mit display:none ein- bzw. ausblendest?

    So long,
     Martin

    --
    Niemand lebt allein von seinen Träumen.
    Aber wer träumt, lebt noch.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo Martin,

      entschuldige, dass mir bei der Anrede gerade spontan ein NDW-Hit von Nickerbocker & Biene aus den 80ern einfällt ... ;-)

      Kann ich nichts zu sagen, ist wohl nicht ganz meine Generation ;-))

      Leider wird das nicht animiert, also hat jemand eine Idee, wie ich das realisieren kann?

      was meinst du mit animiert?

      Mit animiert meine ich, dass mit dem Klick, die Zellen nicht einfach platsch und weg, sondern wie eine Art Jalousie langsam zusammenfahren.

      Gibts überhaupt eine Chance das mit eine Tabelle zu realisieren?

      Wie wäre es mit mehreren tbody-Elementen, die du mit display:none ein- bzw. ausblendest?

      Klingt nicht schlecht die Idee, zumindest wäre es mit den 4 einzelnen Animationen gelöst.
      Wusste nicht, dass eine Tabelle mehrere TBODYs haben kann und darf.
      Allerdings verwende ich ja schon display:none, aber da findet eben keine Animation statt, anders als bei Änderungen der Farbe, der Höhe oder Opacity etc.
      Da ich keine feste Höhe habe, sowohl bei der Anzahl der Zeilen pro Gruppe als auch bei der Höhe pro Zeile, müsste ich mir beim Ausblenden die ursprüngliche Höhe merken.

      Wenn es keine andere Lösung gibt, werde ich das wohl auf diese Art realisieren müssen, oder?

      Klaus

      1. Mit animiert meine ich, dass mit dem Klick, die Zellen nicht einfach platsch und weg, sondern wie eine Art Jalousie langsam zusammenfahren.

        Ich löse dieses mit jQuery (slideToogle)

        1. @@Christian_123:

          nuqneH

          Mit animiert meine ich, dass mit dem Klick, die Zellen nicht einfach platsch und weg, sondern wie eine Art Jalousie langsam zusammenfahren.

          Ich löse dieses mit jQuery (slideToogle)

          Funktioniert aber nicht.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Aloha ;)

        Neben dem vorgeschlagenen jQuery gibt es da auch noch die Möglichkeit, die Animationsfähigkeiten von CSS3 einzusetzen.

        Da du das Ding über klicken öffnen willst, wirft dir CSS leider unnötig Steine in den Weg (da CSS leider nicht über Klicks gesteuert werden kann - imho ist eine derartige Pseudoklasse o.ä. allerdings längst fällig).

        In der Zwischenzeit kannst du dir CSS3-konform mit dem Checkbox-Hack aushelfen, der funktioniert auch ganz wunderbar. Und zumindest für meine Begriffe leidet die Semantik darunter auch nicht übermäßig (imho darf ein Radiobutton oder eine Checkbox auch dafür da sein, um den Status visueller Elemente auf einer Seite auszudrücken).

        Vorteil dieser Methode über jQuery: Die User kommen auch dann in den Genuss deiner Animation, wenn sie Javascript deaktiviert haben. Dieser Punkt ist auch der, der mich immer möglichst lang davon abhält, Javascript in irgendeiner Form für Designzwecke einzusetzen.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hi there,

          In der Zwischenzeit kannst du dir CSS3-konform mit dem Checkbox-Hack aushelfen, der funktioniert auch ganz wunderbar. Und zumindest für meine Begriffe leidet die Semantik darunter auch nicht übermäßig (imho darf ein Radiobutton oder eine Checkbox auch dafür da sein, um den Status visueller Elemente auf einer Seite auszudrücken).

          Vorteil dieser Methode über jQuery: Die User kommen auch dann in den Genuss deiner Animation, wenn sie Javascript deaktiviert haben. Dieser Punkt ist auch der, der mich immer möglichst lang davon abhält, Javascript in irgendeiner Form für Designzwecke einzusetzen.

          Hab ich da was versäumt? Was macht jQuery, wenn die User Javascript deaktiviert haben???

          1. @@Klawischnigg:

            nuqneH

            Vorteil dieser Methode über jQuery: Die User kommen auch dann in den Genuss deiner Animation, wenn sie Javascript deaktiviert haben. Dieser Punkt ist auch der, der mich immer möglichst lang davon abhält, Javascript in irgendeiner Form für Designzwecke einzusetzen.

            Hab ich da was versäumt? Was macht jQuery, wenn die User Javascript deaktiviert haben???

            Das sollte wohl heißen: Vorteil dieser Methode _gegen_über jQuery

            Wobei das für mich ein Nebenvorteil ist. Hauptvorteile: CSS-Animation läuft flüssiger. Es wird Code gespart (vielleicht sogar die Einbindung von jQuery), damit Ladezeit gespart.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Aloha ;)

            Hab ich da was versäumt? Was macht jQuery, wenn die User Javascript deaktiviert haben???

            Nix macht jQuery dann ;) Tut mir leid, wie Gunnar schon angemerkt hat, war mein gehirninterner Sprachprozessor gestern offenbar nicht recht mit der Logikzentrale verknüpft und ich hab "Vorteil der Methode über jQuery" geschrieben statt "Vorteil der Methode gegenüber jQuery". Das meinte ich eigentlich.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. Hi there,

    ich habe einige Zahlen und Daten tabellarisch aufgelistet, die auch gruppiert sind.
    Die sozusagen als Überschrift zu sehende Gruppen-Zeile wird mit einem colspan dargstellt.
    Aber auch einzelne TDs können colspan enthalten.
    Stellt euch Umsätze pro Kunde und Standort vor, kategorisiert nach Artikelgruppe.

    Über einen Klick in diese Gruppenspalte können alle darunter liegenden Zeilen aus- und eingeblendet werden. Dies erreiche ich, indem ich allen datunter liegenden TRs style.display="none" angebe oder eben wieder auf style.display="" setze.

    Leider wird das nicht animiert, also hat jemand eine Idee, wie ich das realisieren kann?

    Einen Jalousie-Effekt kannst Du im Prinzip ganz leicht erreichen, indem Du zwei Stylesheetklassen für die TR-Zeile definierst, eine mit "display:table-row" (oder was weiss ich, wie das bei Tabellen heisst, ich verwend das sowenig) und eine "display:none".
    Dann kannst Du mit Javascript den sichtbaren resp. unsichtbaren Zeilen die entsprechenden Klassen zuweisen. Und für die "Animation" verwendest Du einfach eine CSS3-Transition für den Übergang von einer Klasse zur anderen. Dafür brauchst Du nicht diesen ganzen jQuery-Mist zu laden.

    Ob es eine Möglichkeit ohne Javascript gibt, wage ich zu bezweifeln. Camping-RIDER meint, es geht mit jQuery OHNE Javascript, vielleicht hat er ja recht, auch wenn ich es nicht so recht glaube...

    1. @@Klawischnigg:

      nuqneH

      Einen Jalousie-Effekt kannst Du im Prinzip ganz leicht erreichen, indem Du zwei Stylesheetklassen für die TR-Zeile definierst, eine mit "display:table-row" (oder was weiss ich, wie das bei Tabellen heisst, ich verwend das sowenig) und eine "display:none".
      […] Und für die "Animation" verwendest Du einfach eine CSS3-Transition für den Übergang von einer Klasse zur anderen.

      Transisions gibt es nur für numerische Werte. Was sollten denn auch Zwischenwerte zwischen "table-row" und "none" sein?

      Man könnte auf eine Transition von height oder max-height kommen. Funktioniert aber nicht, da Browser bei Tabellen die Höhe von Zellen automatisch vergrößern, damit ihr Inhalt vollständig zu lesen ist.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@Gunnar Bittersmann:

        nuqneH

        Man könnte auf eine Transition von height oder max-height kommen. Funktioniert aber nicht, da Browser bei Tabellen die Höhe von Zellen automatisch vergrößern, damit ihr Inhalt vollständig zu lesen ist.

        Man könnte auf eine Transition von line-height, padding-top, padding-bottom (ggfs. auch border-width) kommen. Funktioniert.

        Qapla'

        PS: jQuery hier aus Faulheit. Wenn man sowieso jQuery verwendet, dann auch hierfür. Ansonsten wäre es unsinnig, wegen dieses Effekts jQuery einzubinden; die 2 Eventhandlerfunktionen sind in Vanilla-JavaScript auch schnell geschrieben.

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hi there,

        Transisions gibt es nur für numerische Werte. Was sollten denn auch Zwischenwerte zwischen "table-row" und "none" sein?

        "table-maybe"?

        Man könnte auf eine Transition von height oder max-height kommen. Funktioniert aber nicht, da Browser bei Tabellen die Höhe von Zellen automatisch vergrößern, damit ihr Inhalt vollständig zu lesen ist.

        Stimmt. Ich hab' nachgesehen, ich hatte ein ähnliches Problem einmal gelöst, aber wie Du richtig sagst, waren das erstens eben keine Tabellenzeilen und zweitens hab ich Werte einer bestimmten Höhe resp. Null verwendet. Man wird, nein, man ist halt alt...;)

    2. Aloha ;)

      Camping-RIDER meint, es geht mit jQuery OHNE Javascript, vielleicht hat er ja recht, auch wenn ich es nicht so recht glaube...

      Er hat Unrecht.

      Ob es eine Möglichkeit ohne Javascript gibt, wage ich zu bezweifeln.

      Naja, gibt es schon. Ich hatte die Anleitung zum Checkbox-Hack doch extra verlinkt? Das funktioniert vollkommen unproblematisch und völlig ohne Javascript.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[