Das sollte helfen (hoffe ich) - zumindest wenn ich dich richtig verstanden habe tut es das was du willst
HTML-Code:
<html>
<head>
<script type="text/javascript">
function toggle(rowCount) {
myHead = document.getElementById("td-header");
myRowSpan = myHead.rowSpan;
if (myHead.rowSpan==rowCount+1) {
// zuklappen
for (i=1;i<=rowCount;i++) {
currentTr = document.getElementById("td-data-"+i);
currentTr.style.display = "none";
}
myHead.rowSpan=1;
} else {
// aufklappen
for (i=1;i<=rowCount;i++) {
currentTr = document.getElementById("td-data-"+i);
currentTr.style.display = "";
}
myHead.rowSpan=rowCount+1;
}
}
</script>
<title>Tabelle aufklappen</title>
</head>
<body>
<table border="1">
<tr>
<td id="td-header" rowSpan="1">...</td>
<td>...</td>
<td>...</td>
</tr>
<tr id="td-data-1" style="display:none">
<td>...</td>
<td>...</td>
</tr>
<tr id="td-data-2" style="display:none">
<td>...</td>
<td>...</td>
</tr>
</table>
<a href="#" onclick="toggle(2)">Toggle</a>
</body>
Ich blende nicht die einzelnen Zellen der Tabelle aus sondern die ganze Zeile. Der toggle Funktion übergebe ich die Anzahl der Datenzeilen, überprüfe den aktuellen rowspan Wert und entscheide dann ob ich ausblenden oder einblenden muss. Sollte soweit klar sein oder?
lg Matthias
[edit] Das JS kann man natürlich noch "schöner programmieren" damit man nicht zweimal mehr oder weniger die selber for-Schleife drinnen hat, aber das war jetzt mal nur Quick&Dirty
Und die ids sollten natürlich "tr-data-1" etc. heißen