Wie kann ich bei einer HTML Tabelle eine Zeile durch klicken erweitern?

...komplette Frage anzeigen

3 Antworten

Hallo, warum weist du den ausklappbaren Zeilen nicht einfach eine CSS Class zu und definierst darin die Background Color neu?

LG Chris (vom Handy)

Hast du ein Beispiel, ich kann mir das nicht so richtig vorstellen

0

Kannst du mal deine Tabellen "code" posten damit ich es dir direkt an deiner Tabelle erklären kann es reicht ein ausklappbares Teil

1

Und hart du schon den jQuerry Code für die dropdownbar oder nicht?

1

Ich zeige es dir gleich wenn ich zuhause bin

1

Also ich erkläre dir es an einem Teil deiner Tabelle. Setze dich mal mit CSS auseinander dann würdest du das bestimmt einfach auch hinbekommen.

also nehmen wir den schnipsel:

...<tr><td>Günther</td><td>Bla bla</td></tr>...

Nun willst du die Zeilenfarbe verändern also erstmal zum Syntax:

Syntax Nummer 1:

<tag style="deinstyle: css;">Hallo Welt</tag>

Syntax Nummer 2:

<tag id="IDName">Hallo Welt</tag>

dazu musst du dann noch die ID im stylesheet definieren oder

Syntax Nummer 3:

<tag class="ClassName">Hallo Welt</tag>


Nun zu deinem Beispiel. Willst du zum Beispiel die Hintergrundfarbe der tr(table row) = Tabellenzeile wo "Günther" und "Bla bla" drin steht geht das am einfachsten mit Syntax 1 also so:

 ...<tr style="background-color: red;><td>Günther</td><td>Bla bla</td></tr>...


Das "red" steht für die Farbe der Zeile was nun z.B. gegen einen beliebigen Hex-Code ersetzt werden kann. Also diese Methode ist einfach und geht schnell ist aber bei größeren Projekten unübersichtlich.

Also ich würde es wie folgt machen. Ich würde Syntax Nummer 3 verwenden da ich ja immer die Farben der jeweiligen Dropdown Tabelle verändern will(man muss natürlich dann jeder tr die man verändern will die Klasse zuweisen):

...<tr class="dropdowntable"><td>Günther</td><td>Bla bla</td></tr>...


Nun muss man noch im Styletag oder im externen stylesheet die Klasse adden:

.dropdowntable { background-color: #FARBCODE; }

Wenn du was nicht verstehst kannst du ja nochmal kommentieren. Wenn du garnicht klar kommst können wir das auch zusammen machen über Skype und ich erkläre es dir genau.


LG Chris

0

! SORRY ! Jetzt habe ich dein Problem gemerkt.. das hat was mit der Vererbung der Elemente zu tuen. Du musst einfach anstatt an jedes 2 Child zu vererben an jedes 3 vererben so hast du immer eine dazwischen Platz.

1

du musst im Style einfach die tr definition gegen das tauschen dann wird nur jeder 3 grau unterlegt so hast du dann das muster wenn man nicht aufklappt:

tr:nth-child(3n+0){ 
background-color: #f2f2f2;
}

Wenn du nun der Dropdown Zeile auch noch eine andere Farbe geben willst musst du das in den Stylesheet hinzufügen:

tr:nth-child(2n+0){ 
background-color: #FARBCODE;
}
1

Ok.. ^^ ich schau heute Nachmittag nochmal drauf ich glaube ich habe da schon ne Idee für ne Lösung. Unabhängig davon könnte man theoretisch könnte man das ja auch manuell machen( was aber zu aufwendig bei größeren Tabellen ist).  Ich probiere das mal wenn ich zuhause bin. Wenn es geht schicke ich es dir.

LG Chris(vom Handy)

1
@Christoph34212

Ja, an den manuellen Weg habe ich auch schon gedacht, aber wie du schon sagtest, ist das ziemlich aufwendig. Es wäre mega cool, wenn du eine Lösung dafür findest ;-)

0

Hab es:

tr:nth-child(4n+1){ 

background-color: grey;
}

LG Chris

1

Achso und für die Versteckten:

tr:nth-child(2n+2){ 

background-color: #FARBCODE;
}
1

Statt deinen Code zu löschen und irgendwas Neues auszuprobieren, würde ich zuerst mal schauen, warum die anderen Zeilen sich verfärben, welche Definition löst das aus? Das kannst du selbst über dein Browser Dev Tool analysieren (Rechtsklick auf die Seite und "Element untersuchen" bzw. meistens Strg + Shift + I) oder du kannst uns den Code geben und wir schauen mal zusammen rüber. Lade den Code einfach auf codepen.io hoch.

Du könntest in der gleichen Zelle nach dem Namen einen "span" - Tag mit den weiteren Informationen einbauen, diesen zuerst verstecken und dann mit jQuery beim Klick öffnen.

Das habe ich auch schon probiert, allerdings habe ich noch zwei weitere Felder bei denen der span Tag dann natürlich nicht mit drin ist.

0

Was möchtest Du wissen?