Probleme beim Ausblenden einer Tabellenzeile (TR) @ tutorials.de: Tutorials, Forum & Hilfe

Zeebo · 05.08.11 09:45

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-Code:

<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*** · 05.08.11 11:17

Zitat von Zeebo

Woran liegt dies?

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

Zitat von Zeebo

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-Code:

<!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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Probleme im IE beim Ein-und Ausblenden von Tabellenspalten

(c++)Probleme beim Verwenden einer Bibliothek in einer Windows Forms Anwendung

2 Probleme beim DataGrid. beim Löschen und Hinzufügen einer Zeile

Highlight einer Tabellenzeile

Probleme beim Ein- und Ausblenden von Layern nach einer bestimmten Zeit (setTimeout)

E-Mail:

Abonnieren Abbestellen