Christian Kühn: display:none

Hallo ...

<div style="display:none;">
  <tr>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      ...
    </td>
  </tr>
  ...
</div>

dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?

-ck

  1. Also das, was Du da geschrieben hast, ist nach HTML-Standard verboten, weil zwischen dem <table>tag nur die <tr> kommen dürfen!

    Wahrscheinlich willst Du gleich eine ganze Menge von Zeilen verstecken und bist zu faul ;-) das einzeln zu machen.

    Eine Idee wäre unter dem Table-tag einen Tag zu setzen, der als display:table-row-group angezeigt wird. Dann kannst Du im style-Teil sowas schreiben wie

    tablerow { display:table-row-group; }
    tablerow tr { display:none; }

    und im HTML-Teil

    <table>
    <tablerow>
     <tr>
       ...
     </tr>
    </tablerow>
    </table>

    Allerdings ist das nur eine Vermutung, dass das funktioniert und wenn, dann auch sicher nur für die ganz neuen Browser. Ansonsten würde ich darauf tippen, dass Du es ohne mehr Arbeit nicht schaffen wirst.
    Vielleich erklärst Du uns, wozu Du die Sachen verstecken willst. Wahrscheinlich ist das so ein Baummenü, wo man einzelne Bäume ausblenden kann, oder?

    Näheres über die display-Einstellung table-row-group
    http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display

    1. Also das, was Du da geschrieben hast, ist nach HTML-Standard verboten, weil zwischen dem <table>tag nur die <tr> kommen dürfen!

      Wahrscheinlich willst Du gleich eine ganze Menge von Zeilen verstecken und bist zu faul ;-) das einzeln zu machen.

      Eine Idee wäre unter dem Table-tag einen Tag zu setzen, der als display:table-row-group angezeigt wird. Dann kannst Du im style-Teil sowas schreiben wie

      tablerow { display:table-row-group; }
      tablerow tr { display:none; }

      und im HTML-Teil

      <table>
      <tablerow>
      <tr>
         ...
      </tr>
      </tablerow>
      </table>

      Dein Zeug ist genauso unsinnig, denn es gibt kein tablerow Element im HTML-Standard.

      Warum nicht die offizielle HTML-Lösung benutzen?

      table hat als content-Model:
      (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)

      Interessant ist hier der Teil TBODY+, es darf mehr als einen TBODY geben.
      TBODY ist wie folgt definiert:
      <!ELEMENT TBODY    O O (TR)+           -- table body -->

      Es darf also 1 oder mehrere TR enthalten.

      Normalerweise wird TBODY weggelassen, da ja sowohl Anfangs- als auch End-Tag optional sind.

      Wenn man aber Zeilengruppen braucht wie in diesem Fall, bietet es sich an, das auch zu verwenden.

      Andreas

      1. Dein Zeug ist genauso unsinnig, denn es gibt kein tablerow Element im HTML-Standard.

        Warum nicht die offizielle HTML-Lösung benutzen?

        table hat als content-Model:
        (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)

        Interessant ist hier der Teil TBODY+, es darf mehr als einen TBODY geben.
        TBODY ist wie folgt definiert:
        <!ELEMENT TBODY    O O (TR)+           -- table body -->

        Es darf also 1 oder mehrere TR enthalten.

        Normalerweise wird TBODY weggelassen, da ja sowohl Anfangs- als auch End-Tag optional sind.

        Wenn man aber Zeilengruppen braucht wie in diesem Fall, bietet es sich an, das auch zu verwenden.

        Andreas

        ich danke sehr für eure hilfe ...

        -ck

  2. Hallo,

    dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?

    Vielleicht hilft Dir dieses Experiment weiter:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test by TM 07/02</title>
    <script language="JavaScript" type="text/javascript">
    <!--

    function TRsOff(von,bis)
    {
      var trs=document.getElementsByTagName("tr");
      for(i=von-1;i<bis;i++)
      {
        trs[i].style.display="none";
      }
    }

    function TRsOn()
    {
      var trs=document.getElementsByTagName("tr");
      for(i=0;i<trs.length;i++)
      {
        trs[i].style.display="block";
      }
    }

    //-->
    </script>
    </head>
    <body>
    <table border="1" width="50%">
    <tr>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
    </table>
    <form action="">
    <input type="button" value="Off" onclick="TRsOff(2,4)">
    <input type="button" value="On" onclick="TRsOn()">
    </form>
    </body>
    </html>

    TRsOff(2,4) blendet die Reihen 2 bis 4 aus. Im IE sind die Reihen komplett verschwunden, unter Mozilla bleibt die Tabelle bestehen und beim Wiedereinblenden ist die alte Breite weg. Ist vielleicht ausbaufaehig.

    MfG, Thomas

    1. hi

      TRsOff(2,4) blendet die Reihen 2 bis 4 aus. Im IE sind die Reihen komplett verschwunden, unter Mozilla bleibt die Tabelle bestehen und beim Wiedereinblenden ist die alte Breite weg. Ist vielleicht ausbaufaehig.

      vielleicht stattdessen 'visibility:collapsed;' setzen? Das verursacht, im Gegensatz zum Verändern von 'display:' keinen Reflow und sollte daher die besagten Nebenwirkungen nicht haben.
      Dafür dürfte es mit der Browserkompatibilität..

      Grüße aus Bleckede

      Kai

    2. Hi,

      function TRsOn()
      {
        var trs=document.getElementsByTagName("tr");
        for(i=0;i<trs.length;i++)
        {
          trs[i].style.display="block";
        }
      }

      Mozilla braucht da display="table-row"

      Gruß,

      Ronny

      1. Hallo,

        Mozilla braucht da display="table-row"

        Danke, es gibt ja mehr als inline, block und none ;-).

        Mit diesem Provisorium macht's auch Mozilla:

        function TRsOn()
        {
          var trs=document.getElementsByTagName("tr");
          for(i=0;i<trs.length;i++)
          {
            if(document.getElementById && !document.all)
            {
              trs[i].style.display="table-row";
            }
            else
            {
              trs[i].style.display="block";
            }
          }
        }

        Opera macht nix.

        MfG, Thomas

  3. Hallo ...

    <div style="display:none;">
      <tr>
        <td>
          ...
        </td>
      </tr>
      <tr>
        <td>
          ...
        </td>
      </tr>
      ...
    </div>

    dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?

    -ck

    Hallo,
    z.B. so:

    <html><head></head>
    <body>
    <table border>
    <tr><td>Zeile 1</td></tr>
    <tr id="z2" style="display:none;"><td>Zeile 2</td></tr>
    <tr><td>Zeile 3</td></tr>
    </table>
    <form>
    <input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
    <input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">
    </form>
    </body></html>

    Klappt leider nur richtig im IE. Netscape 6 spinnt rum, Opera 5 kanns auch nicht.

    MfG. Lutz T.

    1. hi

      <input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
      <input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">

      wird ja immer doller - wieso in 3 Teufels Namen bitte 'inline' ?!

      entsetzte Grüße aus Bleckede

      Kai

      1. hi

        <input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
        <input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">

        wird ja immer doller - wieso in 3 Teufels Namen bitte 'inline' ?!

        entsetzte Grüße aus Bleckede

        Kai

        Hallo Kai,
        es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
        http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
        nachlesen.
        MfG. Lutz T.
        PS: Mach das Beispiel doch mal im IE auf, dann wirst Du sehen wie's funktioniert.

        1. hi

          es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
          http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
          nachlesen.

          klar, aber da es in eine <tr> geht, wäre wohl display:table-row das logische, oder?

          Grüße aus Bleckede

          Kai

          1. hi

            es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
            http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
            nachlesen.

            klar, aber da es in eine <tr> geht, wäre wohl display:table-row das logische, oder?

            Grüße aus Bleckede

            Kai

            Hallo nochmal,
            table-row scheint neuere CSS-Syntax zu sein. Das war nämlich im SELFHTML 7.0 noch nicht dabei, und wird, wie ich gerade getestet habe vom IE 5.5 nicht unterstützt, mit Netscape 6.1 funzt das aber wunderbar.
            Fazit: Browserweiche programmieren, bei IE 'display:inline' und bei Netscape 6 'display:table-row' verwenden.
            MfG. Lutz T.

            1. Hallo,

              table-row scheint neuere CSS-Syntax zu sein.

              Naja, immerhin seit vier Jahren in CSS2 vorhanden ...

              MfG, Thomas