• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenzeile ein-und ausblenden

Status
Für weitere Antworten geschlossen.
H

heinzisoft

Neues Mitglied
HTML: 
<html>
<head></head>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="radio" name="typ1" onClick="document.getElementById('verstecken').style.display='inline';" />
            Anzeigen
        </td>
        <td>
            <input type="radio" name="typ1" onClick="document.getElementById('verstecken').style.display='none';" />
            Verstecken
        </td>
      </tr>
      <tr style="display:none" id="verstecken">
        <td>
            Inhalt
        </td>
      </tr>
   </table>
</body>
</html>
Dieser HTML-Code sollte eine kleine Tabelle anzeigen. Die Radiobuttons am oberen Rand sollten eine weitere Tabellenzeile ein- und wieder ausblenden.
In manchen Browsern (zB Konqueror) funktioniert das auch. Wenn ich die Seite aber in Firefox aufrufe, lässt sie sich per Klick auf "Einblenden" zwar einblenden, wenn ich dann aber auf "ausblenden" klicke, verschwindet nur der Zeileninhalt - die Tabelle schrumpft nicht automatisch auf ihre ursprüngliche Größe zurück.
Wie kann ich dies erreichen?

Gruß
 
Werbung:
Versuchs mal mit einem Doctype und den Pflichtangaben im <head>-Bereich. Abgesehen davon: wieso machst du es als Tabelle? Mit div geht es sicher, nutze ich auch oft. Bei Tabellen bin ich mir da nicht so sicher.
 
Ok ich hab in die folgendes an den Anfang der Datei geschrieben:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Es hat trotzdem nicht funktioniert.

Ich nehme Tabellen, weil ich mich mit CSS noch nicht gut genug auskenne und dort öfters auf Probleme stoße, für die ich keine Lösung finde. Ich bin zwar zur Zeit am lernen von CSS, aber so lange ich es nicht gut kann, muss ich meine Webseiten anders realisieren.

Das komische ist ja, dass andere Browser es korrekt darstellen. Auch der Firefox stellt es gewissermaßen korrekt dar - die Zeile wird ein und ausgeblendet. Nur wird beim Ausblenden der Platz nicht wieder freigegeben. Wenn ich dann wieder neu Einblende, wird der (von vorher noch) freie Platz nach unten geschoben und die Zeile zusätzlich dazu angezeigt. D.h. bei einigen Ein- und Ausblendungen wird die freie Fläche innerhalb des Rahmens um die Tabelle immer größer.

Gruß,
Heinzi
 
Werbung:
hier hast du das JS dafür

Code: 
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">
  function blend_in(id) {
    document.getElementById(id).style.display = 'block'
  }
  function blend_out(id) {
    document.getElementById(id).style.display = 'none'
  }
</script>
</head>
<body>
 <table width="600px">
  <tr>
   <td>
    <a href="javascript:blend_in('zeile')">einblenden</a><br>
    <a href="javascript:blend_out('zeile')">ausblenden</a>
   </td>
  </tr>
  <tr style="display:none;" id="zeile">
   <td>zeile, zelle 2</td>
  </tr>
 </table>
</body>
</html>

Funktion sollte klar sein
 
Hallo,

ich hab deinen Code per Copy&Paste in eine Html-Datei kopiert. Anschließend habe ich im <table>-Tag border="1" gesetzt, damit man die Tabellenausmaße sieht. Es gibt exakt das selbe Problem, wie bei meiner Datei. Es wird im Browser Konqueror korrekt dargestellt, der Firefox allerdings vergrößert den Tabellenrahmen bei jedem Klick auf "Einblenden" und vergisst das verkleinern beim "Ausblenden" (beim nächsten Einblenden wird er trotzdem wieder vergrößert).
Ist das vielleicht ein Fehler in meinem Firefox? Kann jemand von euch mal nachschauen, ob ihr im Firefox das selbe Problem habt? Ich hab Firefox 2.0.0.6 auf Gentoo Linux.

Gruß,
Heinzi
 
Werbung:
Meine Vermutung ist gerade, dass bei Tabellen dieses ausblenden über display anders gehandelt wird. Du blendest das <tr> aus, aber nicht das darin enthaltene <td>. Das sollte wohl das Problem sein. Noch ein Grund der gegen Tabellen spricht ;-)
 
Hallo,

ich habe den Quelltext dementsprechend abgeändert - JavaScript blendet jetzt sowohl das <tr>, als auch das <td> aus. Es hat sich dadurch nichts geändert.
Anschließend habe ich es so gemacht, dass nur das <td> ausgeblendet wird und das <tr> immer sichtbar ist. Jetzt wird die Tabelle nicht mehr nach unten größer, sondern nach rechts. Bei jedem erneuten Einblenden ist die eingeblendete Zelle eine Spalte weiter rechts...warum auch immer...

Gruß,
Heinzi
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben