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

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - HTML: tabelle dynamisch ein- und ausklappen, problem mit rowspan (http://www.wcm.at/forum/showthread.php?t=231084)

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?

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.

Zitat:

Zitat von zAPPEL (Beitrag 2315604)

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.

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

damit ist mir geholfen. danke vielmals! :)