Probleme beim Ausblenden einer Tabellenzeile (TR)

Zeebo · 5. August 2011

Hallo!

Ich habe folgendes Problem:
Per Javascript lasse ich Tabellenzeilen einer bestimmten CSS Klasse ein- und ausblenden. Dies funktioniert auch in Firefox & Co.
Aber beim IE habe ich das Problem, dass ein DIV, das sich in einer Tabellenzelle befindet, nach dem einblenden nicht wieder ausblendet. Die Tabellenzeile ist zwar weg, aber der Inhalt des DIVs überlagert nun die Tabelle.

Beispiel:

HTML:

<table>
  <tr class="folder">
    <td>Text in Spalte 1</td>
    <td>
      <div>Irgendwas...</div>
      <div>Noch etwas...</div>
    </td>
  </tr>
</table>

Beim setzen von tr.folder per JS auf den Wert "none" wird diese ausgeblendet,
die DIVs bleiben jedoch sichtbar und der Text "Irgendwas..." und "Noch etwas..." überlager nun die Tabelle.

Woran liegt dies?
Wie kann ich dies lösen?

MfG Zeebo

hela · 5. August 2011

Zeebo hat gesagt.:
Woran liegt dies?

Ich weiß es auch nicht. Bei mir funktioniert das.

Zeebo hat gesagt.:
Wie kann ich dies lösen?

Versuch es mal so: Ändere per Javascript nicht die Inline-Styles direkt sondern mach das über die Vergabe und das Löschen von entsprechenden Klassenattributen im HTML. Das ist die "elegantere" Methode.
Beispiel:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5: Mini-Template</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      if(typeof(jQuery)!="undefined") {
        $(document).ready(function() {
          $("body > p:first-child").text("Das DOM ist geladen und kann mit jQuery manipuliert werden.");
          $("tr.folder").addClass("hidden");
        });
      };
    </script>

    <style type="text/css">
      .hidden {
        display: none;
      }
    </style>

  </head>
  <body>

    <p>jQuery ist nicht aktiv.</p>

    <table>
      <tr>
        <td>Text in Zeile 1</td>
        <td>
          <div>Irgendwas...</div>
          <div>Noch etwas...</div>
        </td>
      </tr>
      <tr class="folder">
        <td>Text in Zeile 2</td>
        <td>
          <div>Irgendwas...</div>
          <div>Noch etwas...</div>
        </td>
      </tr>
    </table>

  </body>
</html>

Das Klassenattribut der entsprechenden Tabellenzeile erhält per JS/jQuery den Wert "hidden" und in den CSS-Deklarationen des Dokuments ist dieser Klassenselektor enthalten, so dass die Zeile ausgeblendet wird. Die Sichtbarkeit der Tabellenzeile kannst du dann mit der jQuery-Methode removeClass() wieder herstellen.

Falls du kein jQuery verwenden möchtest, dann nimm die Funktion jscss.js von Christian Heilmann.

Probleme beim Ausblenden einer Tabellenzeile (TR)

Zeebo

Grünschnabel

hela

Neue Beiträge