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

RaistlinMajere · 08.10.2008, 15:53

ich möchte eine zeile einer tabelle erst einmal "eingeklappt" anzeigen (nur die 1. zeile ist sichtbar) und dann bei bedarf "ausklappen" (alle weiteren zeilen werden sichtbar).

die gesamte struktur der tabelle sieht so aus:

Code:

<table>
  <tr>
    <td id="row0_cell0" rowSpan=3>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td id="row1_cell1" style="display:none">...</td>
    <td id="row1_cell2" style="display:none">...</td>
  </tr>
  <tr>
     <td id="row2_cell1" style="display:none">...</td>
     <td id="row2_cell2" style="display:none">...</td>
   </tr>
</table>

per JS werden dann die unsichtbaren tabellenfelder sichtbar gemacht.

Code:

document.getElementById("row1_cell1").style.display="table-cell";
document.getElementById("row1_cell2").style.display="table-cell";
document.getElementById("row2_cell1").style.display="table-cell";
document.getElementById("row2_cell2").style.display="table-cell";

das funktioniert auch wunderbar.

das problem ist nun, daß im eingeklappten zustand zwar ein rowspan=3 angegeben wird, man jedoch die anderen beiden zeilen nicht sieht. das hat zur folge, daß man einen häßlichen abstand am unteren ende der tabelle sieht, als würde codemäßig mit der tabelle etwas nicht stimmen. das dürfte deswegen sein, weil HTML mit einem rowSpan rechnet, jedoch keine rows da sind (bzw. eigentlich schon, aber halt nicht sichtbar).
setze ich rowspan=1, ists dasselbe, weil die anderen zeilen ja eigentlich schon da sind (sprich, man kanns HTML eigentlich nicht recht machen).

ich habe nun probiert, zuerst rowSpan=1 hard zu coden und vor dem sichtbar machen der anderen zeilen das rowSpan-attribut manuell per DOM-zugriff auf 3 zu setzen. das funktioniert zwar (habs mir ausgeben lassen) und die tabelle wird im ausgeklappten zustand auch schön angezeigt, allerdings sieht man im eingeklappten zustand immer noch diesen häßlichen abstand (weil eben trotzdem 3 zeilen vorhanden sind, aber nur ein rowSpan=1 gesetzt wurde), als würde etwas mit dem code nicht stimmen.

weiß jemand eine lösung für dieses problem?

zAPPEL · 08.10.2008, 16:22

Postest mir ein komplettes HTML deines Problems inklusive Javascript? Dann schau ichs mir an wenn ich daheim bin (falls du es bis dahin noch nicht gelöst hast) - so gegen halb 6 müsste sich das ausgehen.

RaistlinMajere · 08.10.2008, 16:50

Zitat:

Zitat von zAPPEL

Postest mir ein komplettes HTML deines Problems inklusive Javascript? Dann schau ichs mir an wenn ich daheim bin (falls du es bis dahin noch nicht gelöst hast) - so gegen halb 6 müsste sich das ausgehen.

erstmal danke für dein angebot.

das ganze ist leider kein statischer code, sondern wird von PHP generiert, was das lesen etwas unkomfortabler macht.
ich werde daher mal schauen, daß ich das nötigste als statischen code poste.

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

RaistlinMajere · 24.10.2008, 15:07

damit ist mir geholfen. danke vielmals!

08.10.2008, 15:53	#1
RaistlinMajere Inventar Registriert seit: 06.04.2001 Alter: 44 Beiträge: 2.343	HTML: tabelle dynamisch ein- und ausklappen, problem mit rowspan ich möchte eine zeile einer tabelle erst einmal "eingeklappt" anzeigen (nur die 1. zeile ist sichtbar) und dann bei bedarf "ausklappen" (alle weiteren zeilen werden sichtbar). die gesamte struktur der tabelle sieht so aus: Code: <table> <tr> <td id="row0_cell0" rowSpan=3>...</td> <td>...</td> <td>...</td> </tr> <tr> <td id="row1_cell1" style="display:none">...</td> <td id="row1_cell2" style="display:none">...</td> </tr> <tr> <td id="row2_cell1" style="display:none">...</td> <td id="row2_cell2" style="display:none">...</td> </tr> </table> per JS werden dann die unsichtbaren tabellenfelder sichtbar gemacht. Code: document.getElementById("row1_cell1").style.display="table-cell"; document.getElementById("row1_cell2").style.display="table-cell"; document.getElementById("row2_cell1").style.display="table-cell"; document.getElementById("row2_cell2").style.display="table-cell"; das funktioniert auch wunderbar. das problem ist nun, daß im eingeklappten zustand zwar ein rowspan=3 angegeben wird, man jedoch die anderen beiden zeilen nicht sieht. das hat zur folge, daß man einen häßlichen abstand am unteren ende der tabelle sieht, als würde codemäßig mit der tabelle etwas nicht stimmen. das dürfte deswegen sein, weil HTML mit einem rowSpan rechnet, jedoch keine rows da sind (bzw. eigentlich schon, aber halt nicht sichtbar). setze ich rowspan=1, ists dasselbe, weil die anderen zeilen ja eigentlich schon da sind (sprich, man kanns HTML eigentlich nicht recht machen). ich habe nun probiert, zuerst rowSpan=1 hard zu coden und vor dem sichtbar machen der anderen zeilen das rowSpan-attribut manuell per DOM-zugriff auf 3 zu setzen. das funktioniert zwar (habs mir ausgeben lassen) und die tabelle wird im ausgeklappten zustand auch schön angezeigt, allerdings sieht man im eingeklappten zustand immer noch diesen häßlichen abstand (weil eben trotzdem 3 zeilen vorhanden sind, aber nur ein rowSpan=1 gesetzt wurde), als würde etwas mit dem code nicht stimmen. weiß jemand eine lösung für dieses problem? ____________________________________ "Life is like a box of rockets," said the Marine. "You never know what you´re gonna ret." Then he pulled the trigger of his BFG9000. Geändert von RaistlinMajere (08.10.2008 um 16:20 Uhr).

08.10.2008, 16:22	#2
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	Postest mir ein komplettes HTML deines Problems inklusive Javascript? Dann schau ichs mir an wenn ich daheim bin (falls du es bis dahin noch nicht gelöst hast) - so gegen halb 6 müsste sich das ausgehen. ____________________________________ „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

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).

24.10.2008, 15:07	#5
RaistlinMajere Inventar Registriert seit: 06.04.2001 Alter: 44 Beiträge: 2.343	damit ist mir geholfen. danke vielmals! ____________________________________ "Life is like a box of rockets," said the Marine. "You never know what you´re gonna ret." Then he pulled the trigger of his BFG9000.

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