mikrocontroller.net

Forum: PC-Programmierung css: Hintergrundfarbe je nach erstem Textbuchstaben einstellbar?


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
Autor: web (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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?

: Verschoben durch Moderator
Autor: Frank L. (Firma: Flk Consulting UG) (flk)
Datum:

Bewertung
1 lesenswert
nicht lesenswert
Javascript
jQuery
CSS

Autor: Raidinist (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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:
$("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.

Autor: Weingut P. (weinbauer)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
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

Autor: nur zufällig hier (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: M.K. B. (mkbit)
Datum:

Bewertung
0 lesenswert
nicht 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 schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.