Tabellenzellen zusammenführen bzw. ausblenden

[Matthias]

hi,

Ich habe folgendes Problem:

Auf meiner Webseite habe ich eine 2x2 Tabelle mit den Zellen 'tf1','tf2','tf3' und'tf4'.

Zuerst mal zu dem was bereits funktioniert:
In einer Frame oberhalb der Tabelle kann ich über einen Button die Funktion Vollbild() aufrufen. Diese soll meine Zelle 'tf1' zum "Vollbild" machen, sie sieht folgendermaßen aus:

var i = 0;  
function Vollbild() {  
  
if ( i == 0) {  
  parent.document.getElementById('tf1').style.display = "table-cell";  
  parent.document.getElementById('tf1').setAttribute("colspan","2");  
  parent.document.getElementById('tf1').setAttribute("rowspan","2");  
  parent.document.getElementById('tf2').style.display = "none";  
  parent.document.getElementById('tf3').style.display = "none";  
  parent.document.getElementById('tf4').style.display = "none";  
  i = i + 1 ;

Beim zweiten klicken wird alles auf Ursprung zurückgesetzt mit:

}else{  
  parent.document.getElementById('tf1').style.display = "table-cell";  
  parent.document.getElementById('tf2').style.display = "table-cell";  
  parent.document.getElementById('tf3').style.display = "table-cell";  
  parent.document.getElementById('tf4').style.display = "table-cell";  
  parent.document.getElementById('tf1').setAttribute("colspan","1");  
  parent.document.getElementById('tf1').setAttribute("rowspan","1");  
  parent.document.getElementById('tf2').setAttribute("colspan","1");  
  parent.document.getElementById('tf2').setAttribute("rowspan","1");  
  parent.document.getElementById('tf3').setAttribute("colspan","1");  
  parent.document.getElementById('tf3').setAttribute("rowspan","1");  
  parent.document.getElementById('tf4').setAttribute("colspan","1");  
  parent.document.getElementById('tf4').setAttribute("rowspan","1");  
  i = 0;

Das Funktioniert soweit ganz gut.

Nun möchte ich aber, in einer nächsten Funktion Ausblendendrei() die Zelle 'tf3' ausblenden und 'tf1' erweitern auf diese. Beim zweiten Klicken soll wieder zurückgesetzt werden.

var j = 0;  
function Ausblendendrei() {  
  
if ( i == 0 && j == 0) {  
  parent.document.getElementById('tf1').style.display = "table-cell";  
  parent.document.getElementById('tf1').setAttribute.colspan = 2;  
  parent.document.getElementById('tf3').style.display = "none";  
  j = j + 1 ;  
}else if ( i == 0 && j == 1){  
  parent.document.getElementById('tf1').setAttribute("colspan","1");  
  parent.document.getElementById('tf3').style.display = "table-cell";  
  j = 0 ;  
}

Das Ausblenden der Zelle funktioniert einwandfrei, allerdings verschiebt sich 'tf4' auf den Platz von 'tf3'.

Ich habe es bereits mit einer zusätzlichen Funktion versucht, die das Gleiche mit 'tf2' bzw. 'tf4' macht, allerdings werden dann nur sowohl 'tf3', als auch 'tf4' ausgeblendet und weder 'tf1' noch 'tf2' werden erweitert.

Was muss ich machen, dass es funktioniert?

Vielen Dank schonmal, dass du dir die Mühe gemacht hast es bis zum Ende durchzulesen - über eine Antwort würde ich mich sehr freuen.

mfg
Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias!

hast du schon mal über den Unterschied zwischen display:none und visibility:hidden nachgedacht?

Matthias

[Matthias]

Oh! Vielen Dank für den Hinweis, Matthias

mfg,
Matthias