nicht angemeldet
Gernot BackHallo René,
Es hat sich noch etwas schwierigeres herausgestellt -
Meine Tabelle ist innerhalb einer Seite, auf welcher zwischen einzelnen Tabs hin und her gewechselt werden kann.
Ausserdem hat es noch andere Tabellen auf dieser Seite, d.h. Init() versteckt gleich die ganze Seite :-(.
Soso, du hast also ein Tabellenlayout!
Kann ich der Tabelle einen Namen geben, welcher von Init verwendet werden kann?
Nein, keinen Namen, sondern eine ID! Ich habe mal Version 5 gebastelt, wobei ich alles zu beherzigen versucht habe, wozu mich Cybear erst unlängst wieder ermahnt hat (immer schön erst die Methoden und Eigenschaften abfragen, bevor man darauf zurückgreift). Aber bestimmt findet der wieder was, was man besser machen sollte!
Wie folgt kannst du die Dynamik auf die Tabelle mit der ID "dyn" beschränken:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 5</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
[code lang=css]
table#dyn {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
table#dyn th {
border-top:solid 1px #000000;
}
table#dyn tbody.hide th {
background:url(plus.gif) no-repeat left;
}
table#dyn tbody.show th {
background:url(minus.gif) no-repeat left;
}
table#dyn tbody.hide td{
display:none;
}
table#dyn tbody.show td{
display:table-cell;
border:solid 1px #000000;
}
</style>
<script type="text/javascript" language="JavaScript">
var dynamic;
function init () {
if(document.all) {
var grupos = document.all.dyn.all.tags('tbody');
} else {
if(document.getElementById && document.getElementsByTagName) {
var grupos = document.getElementById('dyn').getElementsByTagName('tbody');
} else {
dynamic = false;
return;
}
}
dynamic = true;
for (i=0; i<grupos.length; i++ ) {
grupos[i].className='hide';
}
}
function einaus (was) {
if(dynamic) {
var gruppe = was.parentNode.parentNode;
if(gruppe.className=='hide') {
gruppe.className='show';
} else {
gruppe.className='hide';
}
}
}
</script>
</head>
<body>
<table id="dyn">
<tbody>
<tr>
<th colspan="2" onClick="einaus(this)">Gruppe A</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" onClick="einaus(this)">Gruppe B</th>
</tr>
<tr>
<td>Jetzt schreib ich hier mal was rein</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2"onClick="einaus(this)">Gruppe C</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>... und hier auch was</td>
</tr>
<tr>
<td colspan="2" style="display:none"><script type="text/javascript">init()</script></td>
</tr>
</tbody>
</table>
</body>
</html>
[/code]
Gruß Gernot