Gegeben sei eine HTML-Tabelle, und in den Spalten ( <td>Abc</td><td>Def</td> ) steht Text. (wie) kann man mit css erreichen ,dass abhängig vom ersten Buchstaben die Zelle (Hintergrundfarbe) eingefärbt wird je nach dem ersten Buchstaben im Text? Also meinetwegen im Beispiel Abc rot und Def blau?
:
Verschoben durch Moderator
Frank L. schrieb: > Javascript > jQuery > CSS +1. Langform: Geht nicht, weil der Text-Content ein Child-Element vom td ist. CSS selektiert von Außen nach Innen, nicht von Innen nach Aussen. Eine CSS-Rule kann also nicht das TD in Abhängigkeit seines Inhalts verändern. jQuery hat diese Einschränkung natürlich nicht. Ungetestet:
1 | $("td:contains('Abc')").addClass('roteZelle'); |
erledigt das in einem Aufruf für alle TDs im Dokument auf einen Rutsch. Ob's ein "startWith" statt "contains" gibt, darfst du selber suchen.
erst mal den Zellen ne ID geben und dann per JavaScript document.getElementById erst die Inhalte holen und dann den Style entsprechend setzen und fertig ist die Laube
Tabellen kommen doch üblicherweise aus Datenbanken. Also warum nicht php (oder was auch immer) gleich dem Element die richtige Klasse geben lassen wenn es das HTML erstellt? Man muss nicht den ganzen Müll dem Client aufdrücken nur weils geht.
Raidinist schrieb: > $("td:contains('Abc')").addClass('roteZelle'); Der Ansatz ist gut, aber statt contains müsste man dann startsWith (ich kenn den genauen Befehl nicht) verwenden, sonst findet ist es rot, sobald der Text irgendwo vorkommt und nicht nur am Anfang. Weingut P. schrieb: > erst mal den Zellen ne ID geben und dann > per JavaScript document.getElementById erst die Inhalte holen und dann Warum so aufwändig? Man kann auch nur der Tabelle eine ID geben und dann über die Elemente der Tabelle iterieren. Wann man die ID auf dem Server erzeugt, dann könnte man auch gleich die den Style setzen.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.