css: Hintergrundfarbe je nach erstem Textbuchstaben einstellbar?

web Gast #5402348
Lesenswert?
• ▲
▼ 
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?
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Raidinist Gast #5402541
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
nur zufällig hier Gast #5402719
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
M.K. B. #5403065
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren