Stephan Brüning: Tabellenreihe ein- und ausblenden

SELF-Forum

Tabellenreihe ein- und ausblenden

Stephan Brüning Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Leute.

ich benötige mal Eure Hilfe. Ich möchte das Template für meine Seite (http://www.astroinfos.net) ersetzen, modernisieren, wie auch immer ;-) Die Seite hat las Backend Typo3, mit dem ich recht gut umkann. Mehr Schwierigkeiten habe ich aber in der Umsetzung meines Planes, der da lautet:

Auf die rechte Seite kommen vier Kästen (Nachrichten, Der Himmel, Letzte Änderungen und Partnerinfo). Die Kästen soll der User selbst auf- oder zuklappen können. Hierfür benutze ich den folgenden Code:

<-------------------> HTML CODE <----------------------------->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabelle Zeile ausblenden</title>
<script type="text/javascript">
function kasten1an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "block";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten2an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "block";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten3an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "block";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten4an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "block";
}
</script>
</head>
<body>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 1 auf</td></tr>
<tr id="Kasten1" style="display:block">
 <td>
 1
 </td>
</tr>
<tr><td><a href="javascript:kasten1an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 2 auf</td></tr>
<tr id="Kasten2" style="display:none">
 <td>
 2
</td>
</tr>
<tr><td><a href="javascript:kasten2an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 3 auf</td></tr>
<tr id="Kasten3" style="display:none">
 <td>
 3
</td>
</tr>
<tr><td><a href="javascript:kasten3an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 4 auf</td></tr>
<tr id="Kasten4" style="display:none">
 <td>
 4
</td>
</tr>
<tr><td><a href="javascript:kasten4an()">+</a></td></tr>
</table>
</body>
</html>
<-----------------> HTML CODE ENDE<--------------------------->

Meine Frage:
im IE 7 wird es richtig dargestellt. Firefox blendet auch ein und aus, aber verschiebt die Kästen dabei immer weiter nach unten, bzw. schiebt sie nach dem ausblenden nicht wieder hoch. Es ist alles valide. Und eine Forensuche und google brachte mir nicht viel, vermutlich habe ich auch falsche Suchbegriffe eingegeben :-|

Wer kann mir da mal helfen?

Die Datei findet Ihr unter http://www.astroinfos.net/hide.html

P.S.: in die Eingeblendete Reihe kommt nachher der Platzhalter für Typo3 in diesem Stil:
   <div class="nachrichten">###nachrichten###</div>
Die Typo3ler unter Euch wissen, wie ich das meine.

Danke schon mal vielmals

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabellenreihe ein- und ausblenden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    document.getElementById("Kasten1").style.display = "block";

    Nope; nicht der richtige Wert für eine Tabellenzeite. [</archiv/2007/9/t158722/#m1032147>]

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Tabellenreihe ein- und ausblenden

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    zum eigentlichen Problem siehe Gunnars Antwort.

    <?xml version="1.0" encoding="iso-8859-1"?>

    Gibt es einen speziellen Anlass, den IE in den Quirks-Mode zu schicken?

    function kasten1an () {

    [...]

    function kasten2an () {

    [...]

    function kasten3an () {

    [...]

    function kasten4an () {

    [...]

    Diese vier Funktionen machen fast exakt das selbe. Sie sind prädestiniert dafür, eine einzige Funktion zu sein, der Du einen Parameter übergibst.

    <table width="200" bgcolor="#ffffff">

    Warum nicht mit CSS?

    <tr id="Kasten1" style="display:block">

    Das style-Attribut muss natürlich auch weg.

    <tr><td><a href="javascript:kasten1an()">+</a></td></tr>

    Du verlinkst hier nichts, also gibt es keinen Grund für einen Link. Verwende das onclick-Attribut auf einem passenderen Element und style es so, wie Du es Dir wünschst.

    <table width="200" bgcolor="#ffffff">

    Übrigens gibt es die Möglichkeit, einer einzigen Tabelle mehrere <tbody>-Elemente zu geben. Da Du hier gleichförmige Daten zu haben scheinst, dürfte es sinnvoll sein, nicht mehr als eine Tabelle einzusetzen.

    im IE 7 wird es richtig dargestellt.

    Verwechsele bitte nicht "richtig" mit "wie gewünscht" ;-)

    P.S.: in die Eingeblendete Reihe kommt nachher der Platzhalter für Typo3 in diesem Stil:
       <div class="nachrichten">###nachrichten###</div>

    Sind das wirklich tabellarische Daten?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln