Marc Wagener: Tabellenspalte ausblenden

Hallo,
ich habe eine Tabelle mit zwei Spalten.
Beim Aufruf der Seite soll nur Splate A angezeigt werden.
Mit einem Klick auf einen Button soll z.B. Spalte A ausgebelendet werden und nur Spalte B angezeigt werden.
bei erneutem Klick auf den Button, soll wieder nur Spalte A angezeigt werden.

Kann jemand helfen ? Ich habe mich bereits durch einige JavaScripts
"gewühlt" aber noch nichts passendes gefunden.

Danke
Marc

  1. moin Marc Wagener :)

    ich glaube dir helfen folgende Seiten:
    CSS-Eigenschaft visibility, javascript style und Eventhandling mit Javascript

    (wenn der Button geklickt wurde abfragen welchen visibility-Status die jeweiligen Spalten haben und auf den entgegengesetzten Wert - visible oder hidden - setzen)

    Das ganze ist natürlich nicht möglich, wenn der User Javascript ausgeschaltet hat - das solltest du unbedingt im Kopf haben, wenn du sowas umsetzen willst.
    liebe Grüße aus Berlin
    lina-

    --
    Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
    1. <script type="text/javascript">
      <!--
          function display(spalte)
          {
              document.getElementById(spalte).style.display = "none";
          }
      -->
      </script>
      <table>
      <tr>
          <td id="spalte1">spalte1</td>
          <td id="spalte2">spalte2</td>
      </tr>
      </table>
      <a href="javascript:display('spalte1');">spalte1</a>
      <a href="javascript:display('spalte2');">spalte2</a>

  2. Hallo Marc,

    <HTML>
    <BODY>
    <TABLE>
    <TR>
    <TD ID="eins">
    <TABLE BORDER=1>
    <TR>
    <TD>links</TD>
    </TR>
    </TABLE>
    </TD>
    <TD ID="zwei">
    <TABLE BORDER=1>
    <TR>
    <TD>rechts</TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>
    <FORM>
    <INPUT TYPE=BUTTON NAME="mach" VALUE="Klick" onClick="my_funktion()"></BUTTON>
    </FORM>
    <SCRIPT>
    document.getElementById("zwei").style.visibility="hidden";
    var status=0;
    function my_funktion() {
       if (status==0) {
          document.getElementById("eins").style.visibility="hidden";
          document.getElementById("zwei").style.visibility="visible";
          status=1;
       }
       else {
          document.getElementById("eins").style.visibility="visible";
          document.getElementById("zwei").style.visibility="hidden";
          status=0;
       }
    }
    </SCRIPT>
    </BODY>
    </HTML>

    Also, statt einer Tabelle, werden zwei Tabellen gemacht, die je aus einer Spalte bestehen. Diese beiden Spalten werden zu einer Tabelle wieder zusammengebaut.
    Die zweite Spalte mit der ID eins wird zuerst unsichtbar gemacht. Sobald man den Knopf drückt, wird die sichtbare unsichtbar und die unsichtbare wieder sichtbar. Bei IE6.0 funktioniert es.

    Gruß

    Hans

    1. Hallo Hans,
      super; vielen Dank. Ist es auch noch möglich, dass die rechte Spalte dann an der gleichen Stelle wie die linke Spalte angezeigt wid?

      Danke
      Marc

      Hallo Marc,

      <HTML>
      <BODY>
      <TABLE>
      <TR>
      <TD ID="eins">
      <TABLE BORDER=1>
      <TR>
      <TD>links</TD>
      </TR>
      </TABLE>
      </TD>
      <TD ID="zwei">
      <TABLE BORDER=1>
      <TR>
      <TD>rechts</TD>
      </TR>
      </TABLE>
      </TD>
      </TR>
      </TABLE>
      <FORM>
      <INPUT TYPE=BUTTON NAME="mach" VALUE="Klick" onClick="my_funktion()"></BUTTON>
      </FORM>
      <SCRIPT>
      document.getElementById("zwei").style.visibility="hidden";
      var status=0;
      function my_funktion() {
         if (status==0) {
            document.getElementById("eins").style.visibility="hidden";
            document.getElementById("zwei").style.visibility="visible";
            status=1;
         }
         else {
            document.getElementById("eins").style.visibility="visible";
            document.getElementById("zwei").style.visibility="hidden";
            status=0;
         }
      }
      </SCRIPT>
      </BODY>
      </HTML>

      Also, statt einer Tabelle, werden zwei Tabellen gemacht, die je aus einer Spalte bestehen. Diese beiden Spalten werden zu einer Tabelle wieder zusammengebaut.
      Die zweite Spalte mit der ID eins wird zuerst unsichtbar gemacht. Sobald man den Knopf drückt, wird die sichtbare unsichtbar und die unsichtbare wieder sichtbar. Bei IE6.0 funktioniert es.

      Gruß

      Hans

      1. Hallo Marc,

        hm, vielleicht. Müßte man mal mit den Style-dingern rumprobieren. Vielleicht mit innerHTML oder so

        Gruß

        Hans

        Hallo Hans,
        super; vielen Dank. Ist es auch noch möglich, dass die rechte Spalte dann an der gleichen Stelle wie die linke Spalte angezeigt wid?

        Danke
        Marc

        1. Hallo,
          ich habe die Lösung gefunden - danke an alle:

          <script language="JavaScript">
          document.getElementById("1").style.visibility ="hidden";
          var status=0;
          function curr() {
             if (status==0) {
                document.getElementById("1").style.visibility ="visible";
                document.getElementById("2").style.display = "none";
                status=1;
             }
             else {
                document.getElementById("2").style.display ="inline";
                document.getElementById("1").style.visibility = "hidden";
                status=0;
             }
          }
          </script>

          Gruss
          Marc

          Hallo Marc,

          hm, vielleicht. Müßte man mal mit den Style-dingern rumprobieren. Vielleicht mit innerHTML oder so

          Gruß

          Hans

          Hallo Hans,
          super; vielen Dank. Ist es auch noch möglich, dass die rechte Spalte dann an der gleichen Stelle wie die linke Spalte angezeigt wid?

          Danke
          Marc

          1. Hallo Marc,

            <script language="JavaScript">
            document.getElementById("1").style.visibility ="hidden";
            var status=0;
            function curr() {
               if (status==0) {
                  document.getElementById("1").style.visibility ="visible";
                  document.getElementById("2").style.display = "none";
                  status=1;
               }
               else {
                  document.getElementById("2").style.display ="inline";
                  document.getElementById("1").style.visibility = "hidden";
                  status=0;
               }
            }
            </script>

            Ich versteh jetzt noch nicht ganz, was die Display-Eigenschaft "inline" mit einer Tabellenspalte oder den darin enthaltenen Zellen zu tun hat. Vielleicht habe ich ja auch gar nicht verstanden, was du eigentlich wolltest.

            Jedenfalls habe ich mal zu meiner bekannten Seite, auf der man Tabellenzeilen wegblenden kann:

            http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html

            auch mal eine Version gebaut, wo das mit den Tabellenspalten geschieht:

            http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html

            Die unterschiedliche Art, wie die einzelnen Browser dabei die Borders darstellen; insbesondere das "Borderline-Syndrom" von Opera, machen mir dabei aber durchaus noch Kummer.

            Gruß Gernot

            1. Hallo Gernot,

              danke für Deine Antwort.
              ich habe das mit dem inline ausprobiert, damit ich die Spalte einfach wieder eingeblendet wird - auch wenn's nichtganz logisch ist - es funktioniert auf jeden Fall :-)).

              Danke auch für Dein Beispiel.

              Ich wollte eigentlich nur eine Tabelle mit zwei Spalten, in der z.B. durch einen Button wahlweise Spalte A oder Spalte B eingeblendet wird. Bei Aufruf der Seite sollte nur Spalte A eingeblendet sein und beim klich auf denButto nnur Spalte B (an gleicher Stelle).

              Gruss
              Marc

              Hallo Marc,

              <script language="JavaScript">
              document.getElementById("1").style.visibility ="hidden";
              var status=0;
              function curr() {
                 if (status==0) {
                    document.getElementById("1").style.visibility ="visible";
                    document.getElementById("2").style.display = "none";
                    status=1;
                 }
                 else {
                    document.getElementById("2").style.display ="inline";
                    document.getElementById("1").style.visibility = "hidden";
                    status=0;
                 }
              }
              </script>

              Ich versteh jetzt noch nicht ganz, was die Display-Eigenschaft "inline" mit einer Tabellenspalte oder den darin enthaltenen Zellen zu tun hat. Vielleicht habe ich ja auch gar nicht verstanden, was du eigentlich wolltest.

              Jedenfalls habe ich mal zu meiner bekannten Seite, auf der man Tabellenzeilen wegblenden kann:

              http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html

              auch mal eine Version gebaut, wo das mit den Tabellenspalten geschieht:

              http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html

              Die unterschiedliche Art, wie die einzelnen Browser dabei die Borders darstellen; insbesondere das "Borderline-Syndrom" von Opera, machen mir dabei aber durchaus noch Kummer.

              Gruß Gernot

              1. Hi,

                ich habe das mit dem inline ausprobiert, damit ich die Spalte einfach wieder eingeblendet wird - auch wenn's nichtganz logisch ist - es funktioniert auf jeden Fall :-)).

                Wohl nur in Browsern, die sich nicht an Standards halten (also IE).

                Nimm statt "inline" lieber "".

                Eine fertige Funktion: Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe. Ein Beispiel zum Einfärben von Spalten ist dabei. Einfach den Parameter "back" (nebst Farbwert) durch "fold" ersetzen sollte funktionieren.

                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 nochmal,

              http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html

              Die unterschiedliche Art, wie die einzelnen Browser dabei die Borders darstellen; insbesondere das "Borderline-Syndrom" von Opera, machen mir dabei aber durchaus noch Kummer.

              Ich habe mittlerweile eine therapierte Version hochgeladen.

              Opera und Mozilla/Firefox waren wohl an gewissen (jeweils anderen) Stellen bei dynamischen Border-Änderungen mit dem Border-Collapse überfordert.

              Gruß Gernot

              1. Hallo nochmal,

                http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html

                Die unterschiedliche Art, wie die einzelnen Browser dabei die Borders darstellen; insbesondere das "Borderline-Syndrom" von Opera, machen mir dabei aber durchaus noch Kummer.

                Ich habe mittlerweile eine therapierte Version hochgeladen.

                Wie ich dem Borderline-Syndrom bei Netscape 7.1 (getestet unter Windows 98) begegnen soll (obere Tabellenlinie bleibt beim Zusammenklappen auf Originalbreite) weiß ich immer noch nicht.

                Hat jemand eine Idee?

                Gruß Gernot