suche idee um grosse tabelle ohne <table> zu realisieren.

[Jim]

Hallo Forum,

ich stehe etwas auf dem Schlauch und brauche eine schlaue Idee. Kurz zu dem was ich vor habe: Ich habe eine Tabelle mit 144 Zeilen und 9 Spalten.

Nun möchte ich, dass wenn man auf eine Zeile klickt eine eine neue Zeile an dieser Stelle eingefügt wird und effektvoll nach unten slided (mit einem JS-Framework, am besten Prototype/Scriptacoulus weil das eh schon eingebunden ist).

Dummerweise funktioniert solch ein Slideeffekt nicht mit Tabellenzeilen, also muss ich mir was anderes Einfallen lassen. Ich könnte jetzt z.B. 144 DIV's untereinander setzen, dann würde das mit dem Slideeffekt auch funktionieren, doch wir soll ich das am besten mit den Spalten regeln? Vermutlich ist es unsinnig minimum 144x9 DIV's für die Spalten anzulegen, oder?

Gruss

[ChrisB]

Hi,

Vermutlich ist es unsinnig minimum 144x9 DIV's für die Spalten anzulegen, oder?

Es wäre überhaupt unsinnig, tabellarische Daten mit DIVs auszuzeichnen.

Dummerweise funktioniert solch ein Slideeffekt nicht mit Tabellenzeilen, also muss ich mir was anderes Einfallen lassen.

Warum sollte der nicht mit Tabellenzeilen funktionieren?

MfG ChrisB

[Jim]

Es wäre überhaupt unsinnig, tabellarische Daten mit DIVs auszuzeichnen.

Da stimme ich grunsätzlich zu, aber der Effekt wäre mir in dem Fall mehr Wert.

Warum sollte der nicht mit Tabellenzeilen funktionieren?

Ich habe nach vielen eigenen erfoglosen Versuchen gegoogled und den Hinweis gefunden, dass es nicht mit TR's funktioniert. Leider find ich den Link aktuell nicht mehr. Wenn jemand ein funktionierendes Beispeil benennen kann, wäre ich unendlich dankbar.

[suit]

Ich habe nach vielen eigenen erfoglosen Versuchen gegoogled und den Hinweis gefunden, dass es nicht mit TR's funktioniert. Leider find ich den Link aktuell nicht mehr. Wenn jemand ein funktionierendes Beispeil benennen kann, wäre ich unendlich dankbar.

Das ist richtig, bei den mir bekannten Frameworks haben die Ein- und Ausblendemethoden ein sehr einfaches verhalten: es funktioniert mit Elementen die floaten oder display: block; haben. inline-block, table-row oder sonstwas macht Probleme.

Lösung:
Dann Bau den Effekt nach: häng' ein tr-Element mit 9 td-Elementen als Kinder ein, die td-Elemente sind 0 Pixel hoch und haben overflow: hidden. Dann animiere die dinger auf die gewünschte Höhe. Fertig. In script.aculo.us sollte das mit morph() ohne Probleme in ein paar Zeilen zu erledigen sein.

[Gunnar Bittersmann]

@@suit:

nuqneH

In script.aculo.us sollte das mit morph() ohne Probleme in ein paar Zeilen zu erledigen sein.

In CSS 3 sollte das mit Transitions ohne JavaScript in ein paar Zeilen zu erledigen sein.

S.a. ALA

Qapla'

[Beat]

nuqneH

In script.aculo.us sollte das mit morph() ohne Probleme in ein paar Zeilen zu erledigen sein.

In CSS 3 sollte das mit Transitions ohne JavaScript in ein paar Zeilen zu erledigen sein.

S.a. ALA

Ich denke, um das Setzen von Klassen wirst du nicht herumkommen. Und sei es auch nur darum, dass du :target für einige Brahuhuser nach implementierst.

mfg Beat

[Jim]

Dann Bau den Effekt nach: häng' ein tr-Element mit 9 td-Elementen als Kinder ein, die td-Elemente sind 0 Pixel hoch und haben overflow: hidden. Dann animiere die dinger auf die gewünschte Höhe. Fertig. In script.aculo.us sollte das mit morph() ohne Probleme in ein paar Zeilen zu erledigen sein.

Das scheint eine gute Idee zu sein. Leider ist die Zeile/Spalte die ja eigentlich 0 hoch sein soll immer da. Ehrlich gesagt kann ich mir aber nicht erklären warum.

  
<table style="width:600px;">  
  <tr style="background-color:#ccc;" onclick="$('adcon').morph('height:100px;')">  
    <td style="color:#000;">eins</td>  
    <td style="color:#000;">zwei</td>  
    <td style="color:#000;">drei</td>  
    <td style="color:#000;">vier</td>  
  </tr>  
  <tr style="background-color:#fff;" id="adcon">  
    <td style="color:#000;height:0;overflow:hidden;" colspan="4">hier und da.</td>  
  </tr>  
</table>  

[misterunknown]

Moin,

Dummerweise funktioniert solch ein Slideeffekt nicht mit Tabellenzeilen, also muss ich mir was anderes Einfallen lassen. Ich könnte jetzt z.B. 144 DIV's untereinander setzen, dann würde das mit dem Slideeffekt auch funktionieren, doch wir soll ich das am besten mit den Spalten regeln? Vermutlich ist es unsinnig minimum 144x9 DIV's für die Spalten anzulegen, oder?

Guck dir mal "display:table", "display:table-cell" und "display:table-row" an, damit sollte sich das ganz gut machen lassen. Damit kannst du quasi ne Tabelle mit Divs erstellen.

Grüße Marco

[Jim]

Guck dir mal "display:table", "display:table-cell" und "display:table-row" an, damit sollte sich das ganz gut machen lassen. Damit kannst du quasi ne Tabelle mit Divs erstellen.

Schon klar, aber ob das unbedingt so sinnvoll ist 1300 DIV's auf die Seite zu Knalleen, oder ob es da nicht eine bessere Lösung gibt.

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Guck dir mal "display:table", "display:table-cell" und "display:table-row" an, damit sollte sich das ganz gut machen lassen. Damit kannst du quasi ne Tabelle mit Divs erstellen.

Es ist unsinnig, tabellarische Daten mit Divs auszuzeichnen.

Außerdem löst es das Problem nicht.

Qapla'