nicht angemeldet
Gernot BackHallo Cybaer,
ich glaube ich sollte dein Schatzkästlein mal systematisch durchwühlen, das lohnt sich ja wirklich.
Ich habe jetzt mal noch eine neue Variante geschrieben, die hoffentlich alle bisherigen Anregungen in diesem Thread berücksichtigt. Dabei sind der JS- und der HTML-Code auch deutlich schlanker geworden. Vor allem ist jetzt auch semantisch gesehen mehr Logik drin, weil die Überschriften jetzt mit zu den Tabellenbereichen gehören, die sie bezeichnen. Gemeinsam ein- und ausgeblendet werden jetzt die td-Nachfahren der jeweiligen tbody-Elemente, deren th-Nachfahren bleiben unberührt.
Allerdings gibt es jetzt mehr CSS. Erstaunlicherweise braucht der IE hier dennoch keine Extrawurst, jedenfalls nicht, was die Display-Eigenschaft angeht. Da er "table-cell" ja meines Wissens nicht versteht, nimmt er halt einfach das, was bei ihm fälschlicherweise als Default-Wert gilt:"block", den er anders als die anderen Browser bei Tabellenzellen dann aber doch wie "table-cell" darstellt.
Für die Borders bei den th-Zellen musste ich dem IE allerdings doch eine Extrawurst braten, sonst wäre es mit dem Collapsing nichts gewesen und ich hätte bei zusammengefalteten Bereichen unerwünschte Abstände gehabt. Für die anderen Browser hätte es eines Typselektors für "th" gar nicht bedurft:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 3</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
[code lang=css]
table {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
th {
border-top:solid 1px #000000;
}
tbody.hide td{
display:none;
}
tbody.show td{
display:table-cell;
border:solid 1px #000000;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function init () {
var grupos = document.getElementsByTagName('tbody');
for (i=0; i<grupos.length; i++ ) {
grupos[i].className='hide';
}
}
function einaus (was) {
var gruppe = was.parentNode.parentNode.parentNode;
if(gruppe.className=='hide') {
gruppe.className='show';
} else {
gruppe.className='hide';
}
}
//-->
</script>
</head>
<body onLoad="init()">
<table>
<tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus(this)">Gruppe A</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"><a href="#" onClick="einaus(this)">Gruppe B</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"><a href="#" onClick="einaus(this)">Gruppe C</a></th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
[/code]
Gruß Gernot
MudGuard
Gunnar Bittersmann