nicht angemeldet
Hi,
ich glaube ich sollte dein Schatzkästlein mal systematisch durchwühlen, das lohnt sich ja wirklich.
Ist ja noch überschaubar. ;-)
Ich habe jetzt mal noch eine neue Variante geschrieben, die hoffentlich alle bisherigen Anregungen in diesem Thread berücksichtigt.
Nein. Es bleibt das Problem, daß bei *großen* Tabellen selbige erst dargestellt, dann erst eingeklappt wird.
Besser: init() in die Tabelle - und: die ohne JS nutzlosen Links raus! =;-o
Und, natürlich, eine Abfrage, ob es überhaupt klappen kann.
Last, but nor least: Daß die Zellenrahmen ans Ausklappen gekoppelt sind, ist sinnlos. Sie sollten auch zu sehen sein, wenn nicht ausgeklappt werden kann (und somit: auch nicht eingeklappt werden konnte! =;-)).
Daraus ergibt sich folgender Code:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 4</title>
<style type="text/css">
<!--
table {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
th {
border-top:solid 1px #000000;
}
td {
border:solid 1px #000000;
}
tbody.hide td{
display:none;
}
tbody.show td{
display:table-cell;
}
tbody.hide th{
cursor:pointer; cursor:hand;
}
tbody.show th{
cursor:pointer; cursor:hand;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function init () {
if(document.getElementsByTagName) {
var grupos = document.getElementsByTagName('tbody');
for (i=0; i<grupos.length-1; i++ ) {
grupos[i].className='hide';
}
}
}
function einaus (was) {
if(was.parentNode) {
var gruppe = was.parentNode.parentNode;
if(gruppe.className=='hide') {
gruppe.className='show';
} else {
gruppe.className='hide';
}
}
}
//-->
</script>
</head>
<body>
<table>
<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> </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> </td>
</tr>
</tbody>
<tbody style="display:none;">
<tr>
<td colspan="2"><script type="text/javascript" language="JavaScript">init()</script></td>
</tr>
</tbody>
</table>
</body>
</html>
Gruß, Cybaer
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
Gernot Back
MudGuard
Gunnar Bittersmann