nicht angemeldet
Hallo nochmal,
Später solltest du es dann auch wieder einblenden über display:table-row. Gib deinen Tabellenzeilen IDs à la A1 für die erste Zeile der Gruppe und A2 für die zweite, leg entsprechende Arrays an dann -denke ich- kannst du die Dinger auch gemeinsam mit JS ein- und ausblenden.
Ich habe mal was gebastelt, das auch ohne von Hand angelegte Arrays ankommt und stattdessen mit indexOf() arbeitet. Der IE muss display:block haben, um die Zeilen einzublenden, Opera und Mozilla können das hingegen dem Standard entsprechend.
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language="JavaScript">
<!--
[code lang=javascript]
var zeilen;
function init () {
zeilen = document.getElementsByTagName('tr');
}
function einaus (was) {
for (i=0; i<zeilen.length ; i++ ) {
if(zeilen[i].id.indexOf(was)>=0) {
if(zeilen[i].style.display=='none') {
if(document.all&&!window.opera) {
zeilen[i].style.display='block';
} else {
zeilen[i].style.display='table-row';
}
} else {
zeilen[i].style.display='none';
}
}
}
}
//-->
</script>
</head>
<body onLoad="init()">
<table border="1" width="100%">
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeA')">Gruppe A</a></th>
</tr>
<tr id="gruppeA1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeA2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeA3" style="display:none">
<td > </td>
<td> </td>
</tr>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeB')">Gruppe B</a></th>
</tr>
<tr id="gruppeB1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeB2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeB3" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeC')">Gruppe C</a></th>
</tr>
<tr id="gruppeC1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeC2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeC3" style="display:none">
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
[/code]
Gruß Gernot
Gernot Back
MudGuard
Gunnar Bittersmann