[html/js] Verbergen van <TR> gaat mis in Mozilla en Opera

[eborn]

Ik ben momenteel bezig om een gedeelte van een tabel in te laten klappen. Ik doe momenteel het volgende:

HTML:

<tr id="klapper[0]"><td>...</td><td>...</td></tr>
<tr id="klapper[1]"><td>...</td><td>...</td></tr>
...
<tr id="klapper[n]"><td></td><td></td></tr>

Vervolgens gebruik ik een javascript-functie om het array'tje te doorlopen en alle <TR>'s op respectievelijk display: block en display:none te zetten. Op zich gaat dat allemaal prima. De stukken tabel verdwijnen als ik op de daarvoor gemaakte knop klik en verschijnen met de volgende klik ook weer in beeld.

In Internet Explorer gaat dit verschijnen perfect, het ziet er allemaal weer hetzelfde uit als eerst. Onder Netscape/Mozilla/Opera werkt het echter niet goed. Zodra de <TR>'s weer in beeld komen lijkt het alsof de render-engine alle gegevens (dus alle kolommen) in de meest linker kolom probeert te zetten. Het resultaat is dus een kolommenstructuur die helemaal in elkaar gedrukt zit. Standaard geeft ik de breedtes van de kolommen in een <TH> bovenaan de tabel op. Maar extra width tags in elke <TD> hebben ook geen effect.

Zo hoort het er uit te zien:



En zo ziet het er uit na één zodra ik de display op block zet:



Heeft iemand enig idee hoe dit komt? En vooral: hoe kan ik het verhelpen?

[ Voor 30% gewijzigd door eborn op 09-07-2003 20:06 ]

[LXXI]

Zet eens

code:

 

tussen de <td></td>

[André]

Als je in de source kijkt (de real-time source) worden dan alle tags wel goed afgesloten?

De real time source kun je opvragen door in je adresbalk het volgende te typen:
alert(document.body.innerHTML)

[ Voor 40% gewijzigd door André op 09-07-2003 20:06 ]

[eborn]

LXXI schreef op 09 juli 2003 @ 20:03:
Zet eens

code:

 

tussen de <td></td>

Mijn fout: er staan wel iets tussen, was puur even het gemak dat ik er niets tussen heb gezet. Ik zal het even aanpassen.

[eborn]

André schreef op 09 July 2003 @ 20:04:
Als je in de source kijkt (de real-time source) worden dan alle tags wel goed afgesloten?

Jep, klopt allemaal als een bus. Ik zal het stukje code eens op een eigen pagina zetten, mischien werkt er nog een tabel door.

/edit:

Nee, zelfs als ik alleen de tabel (incl. 'verplichte' html tags) in een HTML file schrijf blijft het probleem bestaan.

Het is overigens wel op te lossen door om elke <TR></TR> een nieuwe <TABLE> en </TABLE> te zetten. Als ik dan de ID aan de <TABLE> koppel werkt het. Maar dat kost me dus wel 15 bytes per regel en bovendien een hele hoop extra tabellen.

Wat ik hierboven schreef is natuurlijk een beetje onzin. Ik kan natuurlijk ook alles in één tabel zetten en deze tabel dan in één keer verbergen. Dat gaat in dit geval wel op omdat ik niet bepaalde rijen wil verbergen maar alle rijen van een groep in één keer. Maar dat lost het probleem natuurlijk niet op.

[ Voor 61% gewijzigd door eborn op 09-07-2003 20:13 ]

[eborn]

Opera doet het overigens weer anders. Die gooit bij het heropenen alles op één grote hoop...

[André]

Heb je een url...kunnen we even meekijken.

[eborn]

André schreef op 09 juli 2003 @ 20:41:
Heb je een url...kunnen we even meekijken.

http://www.fambus.nl/~ebus/div-error/test.html

Let even niet op de layout

[crisp]

gebruik geen style.display = 'block' voor een table-row; gebruik in plaats daarvan gewoon style.display = '' (lege string dus)

[eborn]

crisp schreef op 09 July 2003 @ 21:06:
gebruik geen style.display = 'block' voor een table-row; gebruik in plaats daarvan gewoon style.display = '' (lege string dus)

Jep, that did the trick. Wat is nou de achterliggende gedachte hiervan?

[Verwijderd]

eborn schreef op 09 July 2003 @ 21:34:
[...]
Jep, that did the trick. Wat is nou de achterliggende gedachte hiervan?

Een tr heeft standaard een andere display eigenschap dan block, namelijk table-row.

[eborn]

Verwijderd schreef op 09 July 2003 @ 21:36:
Een tr heeft standaard een andere display eigenschap dan block, namelijk table-row.

Aha, nou, dat verklaart veel