HTML: tabelle dynamisch ein- und ausklappen, problem mit rowspan

zAPPEL · 08.10.2008, 17:28

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

08.10.2008, 17:28	#4
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	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 ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett Geändert von zAPPEL (08.10.2008 um 17:36 Uhr).

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)