Roger: zeilen und spalten einer tabelle ein- und ausblenden lassen

moin!

ich möchte eine tabelle darstellen. der übersichtlichkeit halber, würde ich gern den user diverse zeilen und spalten ausblenden lassen. kann man sowas bewerkstelligen? (muss ja keine tabelle sein, nur die tabellarische übersicht muss erhalten bleiben.)
wie gehe ich da am besten vor?

gruß.
roger.

--
meine freundin sagt, ich wäre neugierig.
so steht's zumindest in ihrem tagebuch.
  1. Hallo Roger,

    ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

    Liebe Grüße,

    Bernd

    1. moin!

      ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

      schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?

      gruß.
      roger.

      --
      meine freundin sagt, ich wäre neugierig.
      so steht's zumindest in ihrem tagebuch.
      1. Hallo Roger,

        ausprobieren ;-)

        Weise jedem TR und jedem TD eine Klasse zu.

        <tr class="reihe1">
        <td class="spalte1"></td>
        <td class="spalte2"></td>
        <td class="spalte3"></td>
        <td class="spalte4"></td>
        </tr>
        <tr class="reihe2">

        Dann baust Du noch eine Schleife in dem Du nach dem Objekt mit der gewünschten Klasse suchst, und dann via JS die CSS Eigenschaft änderst.

        Ich habe es jetzt nicht ausprobiert, ist schließlich Dein projekt ;-)

        Müßte aber klappen.

        Liebe Grüße,

        Bernd

        1. Hello out there!

          Weise jedem TR und jedem TD eine Klasse zu.

          Nein, du möchtest die Tabellenzeilen nicht klassifizieren, sondern identifizieren:

          <table>  
            <col id="col0" />  
            <colgroup>  
              <col id="col1" />  
              <col id="col2" />  
            </colgroup>  
            <thead>  
              <tr id="row0">  
                <th>00</th>  
                <th>01</th>  
                <th>02</th>  
              </tr>  
            </thead>  
            <tbody>  
              <tr id="row1">  
                <th>10</th>  
                <td>11</td>  
                <td>12</td>  
              </tr>  
              <tr id="row2">  
                <th>20</th>  
                <td>21</td>  
                <td>22</td>  
              </tr>  
            </tbody>  
          </table>
          

          Der IE versteht es, Tabellenspalten über das col-Element auszublenden:
          #col1 {display: none}

          Firefox lässt sich davon nicht beeindrucken, kennt aber den Nachbarschaftsselektor und Pseudoklassen:
          th:first-child+th, th:first-child+td {display: none}

          Mit der Kombination
          #col1, th:first-child+th, th:first-child+td {display: none}
          sollten wohl alle CSS-interpretierenden UAs die Spalte ausblenden.

          Bei Zeilen gibt es keine Probleme:
          #row1 {display: none}

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. moin!

            wow, super erklärt. so hab ich es auch geschnallt. ich fummel mal. danke!

            gruß.
            roger.

            --
            meine freundin sagt, ich wäre neugierig.
            so steht's zumindest in ihrem tagebuch.
          2. moin!

            ich hab mich grad nochmal etwas genauer mit der sache beschäftigt. und habe da noch ein paar fragen:

            wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)
            genügt ein display: block um die spalte/zeile wieder anzuzeigen?

            gruß.
            roger.

            --
            meine freundin sagt, ich wäre neugierig.
            so steht's zumindest in ihrem tagebuch.
            1. Hi,

              wie kann ich das ein-/ausblenden per klick erreichen?

              Mit CSS? Gar nicht.

              Dafür braucht's ...

              (mit document.getElementsById[...].style?

              ... JavaScript.

              Und es gibt mehrere Möglichkeiten ...

              ... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)

              Gruß, Cybaer

              --
              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
              1. moin!

                ... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)

                selber schuld, wenn ich ihn jetzt nerve? :)

                gruß.
                roger.

                --
                meine freundin sagt, ich wäre neugierig.
                so steht's zumindest in ihrem tagebuch.
                1. Hi,

                  ... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)
                  selber schuld, wenn ich ihn jetzt nerve? :)

                  So sehe ich das! >;-)

                  Aber dir wird auf jeden Fall geholfen - muscht vielleicht nur a bissel warten ... 8-)

                  Gruß, Cybaer

                  --
                  Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            2. Hi,

              wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)

              Du kannst den CSS-Code selbst ändern (s. Coding: CSS-Regeln auslesen & ändern).

              Direkt: Wenn z.B.

              #col1, th:first-child+th, th:first-child+td {display: none}

              die 1. Regel des 1. Stylesheets ist, dann kann man mit document.styleSheets[0].rules[0].style.cssText im IE bzw. mit document.styleSheets[0].cssRules[0].style.cssText im Rest der dies unterstützenden Browserwelt den CSS-Text auswechseln.

              Eine von mehreren Lösungsmöglichkeiten.

              Gruß, Cybaer

              --
              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
              1. Ähm,

                #col1, th:first-child+th, th:first-child+td {display: none}

                da das ein Gruppen-Selektor ist, sind allerdings noch ein paar Unterschiede zw. den Browsern zu beachten. =;-)

                Also sinnvollerweise sollte man das auf 2 Regeln aufteilen:
                1. #col1 {display: none}
                2. th:first-child+th, th:first-child+td {display: none}

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        2. Hallo Gunnar, hallo DeWitt,

          man lernt immer noch dazu ;-)

          Aber Gunnar, was ist denn:

          <col id="col0" />

          Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.

          Liebe Grüße aus dem F'hain,

          Bernd

          1. Hello out there!

            Aber Gunnar, was ist denn:
            <col id="col0" />

            Eine Spalte?

            Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.

            Was ist dir neu? Dass colgroups cols beinhalten oder dass col auch ohne colgroup stehen kann?

            DTD XHTML 1.0 Strict:

            <!ELEMENT table  
                 (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
            

            Liebe Grüße aus dem F'hain,

            Äh, dito. (Nähe Samariterkirche)

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
            1. Hallo Gunnar,

              eine colgroup dient also dazu, mehrere Spalten inhaltlich zu zuordnen.

              Na, dann kann natürlich eine Spalte (col) auch alleine stehen.

              D.h. ich kann auch mehrere colgroups in einer Tabelle haben?

              Liebe Grüße,

              Bernd

              PS: Ich wohne am Boxhagener Platz
              http://www.strich-komma.de/kontakt/kontakt.html

              1. Hello out there!

                D.h. ich kann auch mehrere colgroups in einer Tabelle haben?

                Ja, das sagt der Stern:

                <!ELEMENT table  
                     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
                

                ^
                ? – nicht oder einmal
                * – nicht oder beliebig oft

                • – beliebig oft (mindestens einmal)

                PS: Ich wohne am Boxhagener Platz

                Na, vielleicht läuft man sich mal übern Weg.

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                1. Danke Gunnar,

                  ... Du bleibst bei Deinem Wahlspruch ;-)
                  Gesehen habe wir uns bestimmt schon öfters ;-)

                  Liebe Grüße,

                  Berdn

                  PS: Dir auch mal meinen Dank für die gute Arbeit die Du hier leistest.

      2. moin!

        ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

        schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?

        Mit CSS wurde ja schon eine Lösung angeboten (find ich fast schöner wie meine), aber falls dir Javascript auch recht ist:

          
        var tabid = 'tab1';  
          
        function toggleCol (iNumber) {  
         var TABLE = document.getElementById(tabid);  
         var TR = TABLE.getElementsByTagName("tr")[iNumber];  
         if(TR.style.display == 'none') TR.style.display = '';  
         else TR.style.display = 'none';  
        }  
          
        function toggleRow (iNumber) {  
         var TABLE = document.getElementById(tabid);  
         var TRs = TABLE.getElementsByTagName("tr");  
         var TH = TRs[0].getElementsByTagName("th")[iNumber];  
         if(TH.style.display == 'none') TH.style.display = '';  
          else TH.style.display = 'none';  
          
         for(var i=1;i<TRs.length;i++) {  
          var TD = TRs[i].getElementsByTagName("td")[iNumber-1];  
          if(TD.style.display == 'none') TD.style.display = '';  
          else TD.style.display = 'none';  
         }  
        }  
        
        

        Mit diesen Funktionen kannst du folgende Tabelle modifizieren:

          
          
        <TABLE id="tab1" border="1" cellspacing="0" cellpadding="5"><TR>  
         <TH>&nbsp;</TH>  
         <TH>Spalte 1</TH>  
         <TH>Spalte 2</TH>  
          
        </TR><TR>  
         <TH id="tha" style="border:1 solid red;">Zeile a</TH>  
         <TD>Wert 1a</TD>  
         <TD>Wert 2a</TD>  
          
        </TR><TR>  
         <TH>Zeile b</TH>  
         <TD>Wert 1b</TD>  
         <TD>Wert 2b</TD>  
          
        </TR></TABLE>  
          
        <A href="javascript:toggleRow(1);">Spalte 1 ein/aus</A>  
        <A href="javascript:toggleRow(2);">Spalte 2 ein/aus</A>  
          
        <BR>  
          
        <A href="javascript:toggleCol(1);">Zeile a ein/aus</A>  
        <A href="javascript:toggleCol(2);">Zeile b ein/aus</A>  
        
        
        1. moin!

          klappt super. wobei ich mehr zur css-variante tendiere. javascript muss in beiden varianten ja verwendet werden. allerdings ist es bei der css-variante weitaus weniger. wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...

          wer die wahl hat...

          gruß.
          roger.

          --
          meine freundin sagt, ich wäre neugierig.
          so steht's zumindest in ihrem tagebuch.
          1. wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...

            siehe http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=NODE-Beschreibung, ist ja eigentlich nicht besonders schwer ;)

            wer die wahl hat...

            Genau, und wer die Wahl hat sollte wohl auf Javascript soweit wie möglich verzichten :)

            --
            << Life is just a moment in eternity,
            yet every life echoes there >>
        2. moin!

          ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.

          (momentan erst mal nur die zeilen - keine spalten)

            
          function toggleRow (Start, Stop)  
          {  
           for(iNumber=Start;iNumber<=Stop;iNumber++)  
           {  
            var TABLE = document.getElementById(tabid);  
            var TR = TABLE.getElementsByTagName("tr")[iNumber];  
            if(TR.style.display == 'none') TR.style.display = '';  
            else TR.style.display = 'none';  
           }  
          }  
          
          

          übergeben wird hier die start- und stop-zeile. das macht sich gut für meine kategorieübersicht:

          • kategorie stufe 1
               + kategorie stufe 2
                  + kategorie stufe 3
                     kategorie stufe 4

          soweit das vereinfachte modell. ich hab's gern etwas komplizierter:

          • kategorie stufe 1
               + kategorie stufe 2.1
                  + kategorie stufe 3.1
                     kategorie stufe 4.1
                     kategorie stufe 4.2
                     kategorie stufe 4.3
                  + kategorie stufe 3.2
                     kategorie stufe 4.1
                     kategorie stufe 4.2
               + kategorie stufe 2.2
                  + kategorie stufe 3.1
            [...]

          jede stufe mit einem + (also 1-3) möchte ich zusammen und auseinander klappen lassen (ala explorer). leider kommt etwas verwirrung in die sache, wenn ich jetzt als erstes stufe 3 einklappe (z.b. zeile 4 bis 6) und anschließend stufe 1, ist der stop-wert bei stufe 1 niedriger, als wenn stufe 3 augeklappt ist :(

          kann ich den stop-wert dynamisch ändern?

          gruß.
          roger.

          --
          meine freundin sagt, ich wäre neugierig.
          so steht's zumindest in ihrem tagebuch.
          1. Hi,

            ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.
            (momentan erst mal nur die zeilen - keine spalten)

            BTW: Unter Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe findest Du ein Script, mit dem man so etwas machen kann. Beachte das 3. Beispiel, das auch mit einer Spalte arbeitet.

            Gruß, Cybaer

            --
            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            1. moin!

              BTW: Unter Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe findest Du ein Script

              gefunden! ein traum! danke!
              aber wie gesagt, das mit dem kompliziert machen...
              ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.
              ich nutze momentan onClick="toggle('fold','tr:id','zeileA1');" auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)

              gruß.
              roger.

              --
              meine freundin sagt, ich wäre neugierig.
              so steht's zumindest in ihrem tagebuch.
              1. Hi,

                ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.

                Ja. Beachte die "Komplementär-Funktionalität", die auf die angegebene Ausnahme-Elemente genau das Gegenteil macht - falls Du das meinst.

                ich nutze momentan onClick="toggle('fold','tr:id','zeileA1');" auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)

                Du kannst mit

                • onClick="toggle('unfold','tr:id','zeileA1');" alle TRs ausklappen, deren IDs mit "zeileA1" beginnen, oder mit
                • onClick="toggle('unfold','tr:id','zeile','A1');" alle TRs ausklappen, deren IDs mit "zeile" beginnen, mit Ausnahme der TR mit der ID "zeileA1" - die wird nicht angefaßt, oder mit
                • onClick="toggle('unfold','tr:id','zeile','A1',true);" das gleiche machen, nur daß eben "zeileA1" jetzt nicht mehr ignoriert, sondern komplementär behandelt wird - "zeileA1" wird also, wie bei deinem Originalaufruf, eingeklappt. Das ist dann "fold" & "unfold" in einem Aufruf, statt in zweien.

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                1. moin!

                  oh.. ähm.. das war mir jetzt alles zu komplimentär...
                  ich habe eine tabellenzeile (stufe 1), die gleichzeitig als button gelten soll. wenn ich drauf klicke, sollen alle kategorien unterhalb stufe 1 eingeklappt _und_ wieder ausgeklappt werden können (nach erneutem klick).

                  meine tr-ids hab ich jetzt nach den kategorien benannt:
                  1: zeile1
                  2: zeile11
                  3: zeile111
                  4: zeile112
                  5: zeile113
                  6: zeile12
                  7: zeile2
                  ...

                  um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich
                  toggle('fold','tr:id','zeile1', '1');
                  leider klappt auch die angeklickte zeile (zeile1) weg - war wohl doch besser zusätzlich mit  buchstaben arbeiten...

                  btw: die tips waren gut. damit lässt sich ne menge anstellen.

                  gruß.
                  roger.

                  --
                  meine freundin sagt, ich wäre neugierig.
                  so steht's zumindest in ihrem tagebuch.
                  1. Hi,

                    um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich
                    toggle('fold','tr:id','zeile1', '1');
                    leider klappt auch die angeklickte zeile (zeile1) weg

                    Der Code bedeutet: Verstecke alle TRs mit den IDs "zeile1*". Die TR mit der ID "zeile11" soll nicht versteckt werden.
                    Wenn Du alle "zeile1*" (also "zeile1MitIrgendwasDahinter" ;-)) verstecken möchtest, aber (exakt) "zeile1" (ohne was dahinter ;-)) nicht, dann mußt Du anders vorgehen. Entweder neue Namen überlegen, oder, hey, eben diese ID separat behandeln:

                    toggle('fold','tr:id','zeile1'); toggle('unfold','zeile1');

                    Hier werden alle TRs versteckt, deren ID mit "zeile1" beginnen - also auch die exakte ID "zeile1" ohne was dahinter. Im 2. Aufruf wird dann genau diese ID wieder angezeigt.

                    Mag aber sein (zumindest käme es von der Logik her hin, daß Du einfach eine "leere Ausnahme" angibst. Denn die real behandelte ID ergibt sich ja aus "ID-Anfang" + "ID-Anhang". Wenn "zeile11" ausgenommen werden sollte, ist "zeile1" der Anfang und "1" der Anhang, macht zusammen "zeile1"+"1"="zeile11". Soll die (Gesamt-)ID "zeile1" ausgenommen werden dann könnte man auch den Anfang "zeile1" und den Anhang "" nehmen. Also

                    toggle('fold','tr:id','zeile1','');

                    Also: Klappe alles ein, was mit "zeile11" beginnt, aber nicht das Element mit der ID "zeile1"+""="zeile1"

                    Aber ich weiß nicht, ob das klappt ... :)

                    ... könnte aber. 8-)

                    Gruß, Cybaer

                    --
                    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                    1. moin!

                      toggle('fold','tr:id','zeile1','');

                      klappt mit der klappe.

                      steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?

                      gruß.
                      roger.

                      --
                      meine freundin sagt, ich wäre neugierig.
                      so steht's zumindest in ihrem tagebuch.
                      1. Hi,

                        toggle('fold','tr:id','zeile1','');
                        klappt mit der klappe.

                        Dann habe ich wohl gut programmiert. ;-)

                        steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?

                        Yep, klappiert. :)

                        Antwort: Nicht direkt, aber indirekt. ;-)

                        Mach halt toggle(klappe,'tr:id','zeile1',''); klappe=(klappe=="fold")?"unfold":"fold", wobei klappe ein Stringvariable ist, die anfangs mit "fold" initialisiert wurde - und nach toggle() den Wert wechselt.

                        Gruß, Cybaer

                        --
                        Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                        1. moin!

                          jetzt fehlte nur noch die verarbeitung für mehrere zeilen, den "fold" und "unfold" musste ja pro zeile gespeichert werden und nicht einmal global :)
                          dabei hilft mir ein array:

                            
                          <script type="text/javascript" language="JavaScript">  
                          var klappe = new Array();  
                          function folding(stelle)  
                          {  
                           if (klappe[stelle]=="fold") klappe[stelle] = "unfold";  
                           else klappe[stelle] = "fold";  
                           return klappe[stelle];  
                          }  
                          </script>  
                          
                          

                          ^^ in den body bereich

                          und pro zeile nehme ich einfach eine stelle im array (am besten analog zur zeilenzahl):

                          onClick="toggle(folding(1),'tr:id','zeile1', '');"

                          mit der vereinfachten if-syntax habe ich es leider nicht hinbekommen :(

                          gruß.
                          roger.

                          --
                          meine freundin sagt, ich wäre neugierig.
                          so steht's zumindest in ihrem tagebuch.
                          1. Hi,

                            dabei hilft mir ein array:

                            Auch 'ne Möglichkeit.

                            Aber als "assoziatives Array" (sprich: Object) mit der ID als Schlüssel ist es vielleicht sinnvoller. Am einfachsten ist aber: Direkt als Objekt des jeweiligen (TR-)Elements!

                            Beispiel:

                            document.getElementById("zeile1").klappe="fold";
                            alert(document.getElementById("zeile1").klappe)

                            Vorgehensweise: Zur Initialisierung alle TRs durchgehen (schneller: nur die TRs der bewußten Tabelle). Ist es eine "zu klappende TR" (Eigenschaft id hat z.B. einen passenden Wert), dann verpaßt man der TR zum einen den passenden Eventhandler (onclick mit einer Funktion, die den toggle()-Aufruf enthält) und zum anderen, s.o., das "Status-Objekt" klappe.

                            Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf noch die "Wechsel-Syntax", die einheitlich so aussehen kann:

                            this.klappe=(this.klappe=="fold")?"unfold":"fold"

                            (this ist der Verweis auf das Element des onClicks, also die jeweilge TR)

                            Ist schön kurz & elegant, im HTML-Code ist nichts mehr von der Klapperei zu sehen (außer, daß die Elemente eine ID haben), und molily hat wieder ein schönes Beispiel fürs "Unobtrusive JavaScript" ... ;)

                            Gruß, Cybaer

                            --
                            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                            1. Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf

                              Der sieht dann natürlich anders aus, z.B. so:

                              toggle(this.klappe,'tr:id',this.id,'');

                              this.klappe ist der Verweis auf das "Status-Objekt" und this.id der Verweis auf die ID der jeweiligen TR. Wenn also der HTML-Code <tr id="zeile1"> lautet, man beim Init mit onclick eine Funktion anhängt und mit klappe den Status auf "fold" setzt, dann hat man beim Klick auf die TR mit der ID "zeile1" einen toggle()-Aufruf der so aussieht:

                              toggle("fold",'tr:id',"zeile1",'');

                              Der Status wird danach gewechselt und der nächste Klick kann kommen. ;-)

                              Einheitliche Syntax für alle Zeilen und ohne JS im HTML-Code ...

                              Gruß, Cybaer

                              --
                              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                              1. moin!

                                so langsam wird's heller. ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst. könntest du es nicht evtl. an einem kurzen beispielscript erklären? der ein oder andere wird es dir sicherlich danken :)

                                ansonsten halte ich jetzt erst mal this.klappe.

                                gruß.
                                roger.

                                --
                                meine freundin sagt, ich wäre neugierig.
                                so steht's zumindest in ihrem tagebuch.
                                1. Hi,

                                  ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst.

                                  Lobenswert - denn mindestens fürs nächste Mal ist man schlauer. ;)

                                  könntest du es nicht evtl. an einem kurzen beispielscript erklären?

                                  Das ist ja Arbeit! =;-) Im Ernst: Gerade so viel an der Backe, daß schon das Posten hier Luxus ist.

                                  Der HTML-Code ist genannt: <tr id="zeile1">

                                  Eine Schleife, um alle TRs anzusprechen dürfte bekannt sein.

                                  Bliebe noch der Umstand wie man in einer Init-Funktion die Events setzt?

                                  // In einer Schleife alle TR-Objekte durchgehen
                                  obj=document.getElement...
                                  // Feststellen, ob zu klappender TR
                                  if(obj.id==...) { // Könnte konkret z.B. sein if(obj.id=="zeile1") - da ist dann eine sinnvolle, diesbezügl. leicht zu verwendende Vergabe der IDs gefordert, sowie ein arbeiten mit passenden Stringfunktionen
                                   obj.onclick=callToggle;
                                  }
                                  // Schleife von vorn bis alle Elemente durch

                                  Und dann sollte es natürlich noch die Funktion callToggle() geben:

                                  function callToggle() {
                                    // Ist sinnvoller, Wechsel von klappe toggle() voranzustellen - das spart die Initialisierung (klappe==""->"fold"->"unfold"->"fold"->...
                                    this.klappe=(this.klappe=="fold")?"unfold":"fold";
                                    toggle(this.klappe,'tr:id',this.id,'');
                                  }

                                  ansonsten halte ich jetzt erst mal this.klappe.

                                  :)

                                  Wenn's geht, versuch's doch mal hinzukriegen, und/oder gib mir den URL deiner soweit funktionierenden realen Seite (oder den Code selbst). Dann muß ich mir kein Beispiel ausdenken, sondern kann es "In der Realität" gleich durchziehen ...

                                  Gruß, Cybaer

                                  --
                                  Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!