Tabelle: verschiedene Designs beim auf- und zuklappen von Zeilen

[penny]

Hallo zusammen,

ich bastel jetzt seit ein paar Tagen an einer Tabelle.
Zu verschiedenen Zeilen möchte ich einige zusätzliche Informationen einbauen, diese sollen aber ein- und ausblendbar sein, da es sonst zu schnell unübersichtlich wird.
Einen Teil des Tabellendesigns habe ich in CSS festgelegt (mit CSS habe ich erst vor ein paar Tagen angefangen, daher habe ich da noch sehr wenig Ahnung).

In der CSS verwende ich folgenden Code:

table  
{ border: 1px; width: 100%; cellspacing: 0; padding: 5; }  
th  
{ background-color: #3D3D3D; border: 2px; height:25; }  
.tr1  
{ background-color: #666666; height:35; }  
.tr1:hover  
{ background-color: #953735; }  
  
.tr2  
{ background-color: #999999; height:35; }  
.tr2:hover  
{ background-color: #953735; }  
  
.tr3  
{ background-color: #953735; height:35; }

In der HTML habe ich folgendes verwendet:

<h2>Tabelle</h2>  
<table>  
<colspan>  
<col width="3%">  
<col width="10%">  
<col width="10%">  
<col width="10%">  
<col width="57%">  
</colspan>  
<tr>  
<th></td>  
<th><b>Jahr</b></th>  
<th><b>Monat</b></th>  
<th><b>Tag</b></th>  
<th><b>Geburtstag</b></th>  
</tr>  
  
<tr class="tr1">  
<td><div align="center"><img src="..\01-bilder\pfeile\kasten-rot1-rechts.gif" onClick="getElementById('max-mustermann').style.display='block'"></div></td>  
<td>1991</td>  
<td>07</td>  
<td>21</td>  
<td>Max Mustermann</td>  
</tr></table>  
  
<table id="max-mustermann" style="display:none">  
<tr class="tr3">  
<td width="3%"><div align="center"><img src="..\01-bilder\pfeile\kasten-rot1-hoch.gif" onClick="getElementById('max-mustermann').style.display='none'"></div></td>  
<td>Geboren im Stadtkrankenhaus, Musterstadt...</td>  
</tr>  
</table>  
  
<table>  
<colspan>  
<col width="3%">  
<col width="10%">  
<col width="10%">  
<col width="10%">  
<col width="57%">  
</colspan>  
<tr class="tr2">  
<td width="3%"><div align="center"><img src="..\01-bilder\pfeile\kasten-grau-rechts.gif"></div></td>  
<td> </td>  
<td> </td>  
<td> </td>  
<td> </td>  
</tr>  
</table>

Das mit dem auf- und zu klappen funktioniert wunderbar.

Jetzt möchte ich aber, dass die Zeile, aus der die Aufgeklappte hervorkam (in diesem Fall die mit der class="tr1"), in demselben Farbton hinterlegt wird, wie die Zeile mit den Zusatzinformationen, also in #953735. Den Hover-Effekt habe ich bereits in die CCS eingebaut.
Die veränderte Farbe soll aber bleiben, solange die Zusatzzeile aktiviert ist, unabhängig davon, ob die Maus noch in der Zeile steht oder nicht.
Sobald die Zusatzzeile zugeklappt ist, soll die .tr1-Zeile wieder in ihrem "normalen" Farbton, den ich für .tr1 in der CCS festgelegt hatte, angezeigt werden.

Zudem fände ich es schön, wenn der Pfeil aus der ersten Spalte nach unten zeigen würde, sobald man die Zusatzzeile aufgeklappt hat. Wenn die Zusatzzeile wieder zugeklappt ist, soll der Pfeil wieder nach rechts zeigen). Von dem Pfeil habe ich damals vier Versionen angelegt, also kann ich doch theoretisch die img-Datei des Pfeils austauschen? Dann müsste ich es nur wieder umgekehrt machen, wenn die .tr1-Zeile in ihre Ausgangsform zurückkehrt.

Muss ich vielleicht einen "OnClick-" oder "onMouse..."-Effekt einbauen?

Wäre super, wenn mir jemand einen Tipp geben kann. Vielen Dank schon einmal im Vorraus :)

[Baba]

ich bastel jetzt seit ein paar Tagen an einer Tabelle.

Helfer freuen sich immer über ein online Beispiel, zum Beispiel bei jsFiddle. Kopiere in die Felder html, css und js-Teil und Teile uns den Link mit, nachdem Du auf Save geklickt hast.

In der HTML habe ich folgendes verwendet:

Das ist nicht valide.

<colspan>
<col width="3%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="57%">
</colspan>

colspan wird meines Wissens als Attribut gebraucht, nicht als eigenständiges Element. Du meintest vielleicht colgroup?

<th></td>

Wer a sagt, muss auch b sagen.

<td width="3%"><div align="center"><img src="..\01-bilder\pfeile\kasten-rot1-hoch.gif" onClick="getElementById('max-mustermann').style.display='none'"></div></td>

Ich würde js nicht inline deklarieren. Macht es besser modifizierbar/wartbar.

Jetzt möchte ich aber (...)

Bitte erstell mal ein fiddle, dann sehen wir weiter.

Cheers,
Baba

[Steel]

Moin!

Das ist nicht valide.

<colspan>
<col width="3%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="57%">
</colspan>
colspan wird meines Wissens als Attribut gebraucht, nicht als eigenständiges Element. Du meintest vielleicht colgroup?

<th></td>
Wer a sagt, muss auch b sagen.

Siehste mal. Das is mir gar nicht aufgefallen. Doch gut dass hier immer jemand rumgeistert der sich Code ganz genau anschaut.

[Steel]

Moin!

Das machst Du in dem Javascript, das fuer das auf- und zuklappen zustaendig ist. Dort kannst Du sowohl das Bild austauschen als auch die Klasse(n) der betreffenden Elemente erweitern/aendern.

Als Tipp: baue dir je eine Klasse fuer den aus- und den eingeklappten Zustand fuer das Bild (dass ich als Hintergrundbild einbinden wuerde - Stichwort Sprite) und deine zu faerbende Zelle. Dann tauscht Du bei Klick jeweils die beiden Klassen aus.

Und hier noch die uebliche Belehrung zu Deinem Code:
Dein HTML und auch JS sind ueberarbeitungswuerdig. Sind die ganzen Tabellen wirklich noetig? Inline JS Code (im onclick Attribut der Elemente notiert) sollte man in Funktionen kapseln um redundanten Code zu vermeiden. Am Besten laesst man JS Code gleich ganz aus dem HTML (Trennung von Design, Inhalt und Code) und hat nur eine externe JS Datei. (In der kann man den Code auch an die Elemente binden)

Das aber nur der Vollstaendigkeit halber. Ich kann mit dem was Du abgeliefert hast auch so leben. Aber evtl. moechtest Du Dich ja verbessern und kannst was davon gebrauchen.