display:none
Christian Kühn
- dhtml
0 Konrad Urlichs0 Thomas Meinike0 Kai Lahmann0 Ronny
0 Lutz T.0 Kai Lahmann0 Lutz T.
Hallo ...
<div style="display:none;">
<tr>
<td>
...
</td>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</div>
dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?
-ck
Also das, was Du da geschrieben hast, ist nach HTML-Standard verboten, weil zwischen dem <table>tag nur die <tr> kommen dürfen!
Wahrscheinlich willst Du gleich eine ganze Menge von Zeilen verstecken und bist zu faul ;-) das einzeln zu machen.
Eine Idee wäre unter dem Table-tag einen Tag zu setzen, der als display:table-row-group angezeigt wird. Dann kannst Du im style-Teil sowas schreiben wie
tablerow { display:table-row-group; }
tablerow tr { display:none; }
und im HTML-Teil
<table>
<tablerow>
<tr>
...
</tr>
</tablerow>
</table>
Allerdings ist das nur eine Vermutung, dass das funktioniert und wenn, dann auch sicher nur für die ganz neuen Browser. Ansonsten würde ich darauf tippen, dass Du es ohne mehr Arbeit nicht schaffen wirst.
Vielleich erklärst Du uns, wozu Du die Sachen verstecken willst. Wahrscheinlich ist das so ein Baummenü, wo man einzelne Bäume ausblenden kann, oder?
Näheres über die display-Einstellung table-row-group
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
Also das, was Du da geschrieben hast, ist nach HTML-Standard verboten, weil zwischen dem <table>tag nur die <tr> kommen dürfen!
Wahrscheinlich willst Du gleich eine ganze Menge von Zeilen verstecken und bist zu faul ;-) das einzeln zu machen.
Eine Idee wäre unter dem Table-tag einen Tag zu setzen, der als display:table-row-group angezeigt wird. Dann kannst Du im style-Teil sowas schreiben wie
tablerow { display:table-row-group; }
tablerow tr { display:none; }
und im HTML-Teil
<table>
<tablerow>
<tr>
...
</tr>
</tablerow>
</table>
Dein Zeug ist genauso unsinnig, denn es gibt kein tablerow Element im HTML-Standard.
Warum nicht die offizielle HTML-Lösung benutzen?
table hat als content-Model:
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)
Interessant ist hier der Teil TBODY+, es darf mehr als einen TBODY geben.
TBODY ist wie folgt definiert:
<!ELEMENT TBODY O O (TR)+ -- table body -->
Es darf also 1 oder mehrere TR enthalten.
Normalerweise wird TBODY weggelassen, da ja sowohl Anfangs- als auch End-Tag optional sind.
Wenn man aber Zeilengruppen braucht wie in diesem Fall, bietet es sich an, das auch zu verwenden.
Andreas
Dein Zeug ist genauso unsinnig, denn es gibt kein tablerow Element im HTML-Standard.
Warum nicht die offizielle HTML-Lösung benutzen?
table hat als content-Model:
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)
Interessant ist hier der Teil TBODY+, es darf mehr als einen TBODY geben.
TBODY ist wie folgt definiert:
<!ELEMENT TBODY O O (TR)+ -- table body -->
Es darf also 1 oder mehrere TR enthalten.
Normalerweise wird TBODY weggelassen, da ja sowohl Anfangs- als auch End-Tag optional sind.
Wenn man aber Zeilengruppen braucht wie in diesem Fall, bietet es sich an, das auch zu verwenden.
Andreas
ich danke sehr für eure hilfe ...
-ck
Hallo,
dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?
Vielleicht hilft Dir dieses Experiment weiter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 07/02</title>
<script language="JavaScript" type="text/javascript">
<!--
function TRsOff(von,bis)
{
var trs=document.getElementsByTagName("tr");
for(i=von-1;i<bis;i++)
{
trs[i].style.display="none";
}
}
function TRsOn()
{
var trs=document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++)
{
trs[i].style.display="block";
}
}
//-->
</script>
</head>
<body>
<table border="1" width="50%">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
<form action="">
<input type="button" value="Off" onclick="TRsOff(2,4)">
<input type="button" value="On" onclick="TRsOn()">
</form>
</body>
</html>
TRsOff(2,4) blendet die Reihen 2 bis 4 aus. Im IE sind die Reihen komplett verschwunden, unter Mozilla bleibt die Tabelle bestehen und beim Wiedereinblenden ist die alte Breite weg. Ist vielleicht ausbaufaehig.
MfG, Thomas
hi
TRsOff(2,4) blendet die Reihen 2 bis 4 aus. Im IE sind die Reihen komplett verschwunden, unter Mozilla bleibt die Tabelle bestehen und beim Wiedereinblenden ist die alte Breite weg. Ist vielleicht ausbaufaehig.
vielleicht stattdessen 'visibility:collapsed;' setzen? Das verursacht, im Gegensatz zum Verändern von 'display:' keinen Reflow und sollte daher die besagten Nebenwirkungen nicht haben.
Dafür dürfte es mit der Browserkompatibilität..
Grüße aus Bleckede
Kai
Hi,
function TRsOn()
{
var trs=document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++)
{
trs[i].style.display="block";
}
}
Mozilla braucht da display="table-row"
Gruß,
Ronny
Hallo,
Mozilla braucht da display="table-row"
Danke, es gibt ja mehr als inline, block und none ;-).
Mit diesem Provisorium macht's auch Mozilla:
function TRsOn()
{
var trs=document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++)
{
if(document.getElementById && !document.all)
{
trs[i].style.display="table-row";
}
else
{
trs[i].style.display="block";
}
}
}
Opera macht nix.
MfG, Thomas
Hallo ...
<div style="display:none;">
<tr>
<td>
...
</td>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</div>
dis hab ich versucht, funktioniert leider nicht. kann mir jemand sagen wie ich es schaffe nen ganzen block mit tr's zu verbergen?
-ck
Hallo,
z.B. so:
<html><head></head>
<body>
<table border>
<tr><td>Zeile 1</td></tr>
<tr id="z2" style="display:none;"><td>Zeile 2</td></tr>
<tr><td>Zeile 3</td></tr>
</table>
<form>
<input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
<input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">
</form>
</body></html>
Klappt leider nur richtig im IE. Netscape 6 spinnt rum, Opera 5 kanns auch nicht.
MfG. Lutz T.
hi
<input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
<input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">
wird ja immer doller - wieso in 3 Teufels Namen bitte 'inline' ?!
entsetzte Grüße aus Bleckede
Kai
hi
<input type="button" onClick="document.getElementById('z2').style.display='inline'" value="anzeigen">
<input type="button" onClick="document.getElementById('z2').style.display='none'" value="verbergen">
wird ja immer doller - wieso in 3 Teufels Namen bitte 'inline' ?!
entsetzte Grüße aus Bleckede
Kai
Hallo Kai,
es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
nachlesen.
MfG. Lutz T.
PS: Mach das Beispiel doch mal im IE auf, dann wirst Du sehen wie's funktioniert.
hi
es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
nachlesen.
klar, aber da es in eine <tr> geht, wäre wohl display:table-row das logische, oder?
Grüße aus Bleckede
Kai
hi
es macht nur Sinn etwas mit style="display:none" (d.h. verborgen)im HTML anzugeben, wenn man es auch irgendwann mal sichtbar machen will, ansonsten könnte man es ja gleich weglassen. Und was style="display:inline" macht, kann man unter
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
nachlesen.
klar, aber da es in eine <tr> geht, wäre wohl display:table-row das logische, oder?
Grüße aus Bleckede
Kai
Hallo nochmal,
table-row scheint neuere CSS-Syntax zu sein. Das war nämlich im SELFHTML 7.0 noch nicht dabei, und wird, wie ich gerade getestet habe vom IE 5.5 nicht unterstützt, mit Netscape 6.1 funzt das aber wunderbar.
Fazit: Browserweiche programmieren, bei IE 'display:inline' und bei Netscape 6 'display:table-row' verwenden.
MfG. Lutz T.
Hallo,
table-row scheint neuere CSS-Syntax zu sein.
Naja, immerhin seit vier Jahren in CSS2 vorhanden ...
MfG, Thomas