Bedingte Formatierung in HTML

[illon]

Hallo,

gibt es eine einfache Möglichkeit eine Tabelle farblich zu unterscheiden anhand des Wertes welcher in ihr steht.

In Excel gibt es diese Funktion und nennt sich Bedingte Formatierung.

Bsp.:

Wenn der Wert des Feldes = 1 --> Farbe grün
Wenn der Wert des Feldes = 10 --> Farbe rot

Gibt es diese Möglichkeit auch in html anhand eines Scripts welches die Zahl prüft und dann das entsprechende Stylesheet verwendet ?

Danke

[weis-nix]

Hallo,

mit PHP z.B.:

PHP-Code:

if ($wert == 1) {
   echo "<div class=\"gruen\">".$wert."</div>";
} else if ($wert == 10) {
   echo "<div class=\"rot\">".$wert."</div>";
} 


Grüße,
Kerstin

[richtsteiger]

Oder mit Javascript. Als Beispiel mal für jQuery:

$('td').each(function(i) {
  var v = parseInt($(this).text());
  var c = '#000'; // Default-Farbe
  switch (v) {
    case 1:
      c = 'blue';
      break;
    case 10:
      c = 'green';
      break;
    case 100:
      c = '#c00';
      break;
    ...
  }
  $(this).css({
    color : c
  });
});

[illon]

Hallo,

danke schon mal für die Tipps.

Ich vergaß, dass php in diesem Falle leider nicht anwendbar ist.
Es handelt sich in diesem Falle um eine reine *.html Datei.

[illon]

Hi,

ich habe nun das mit dem jquery code mal getestet.

Ich komme aber nicht gerde weit... es wechselt nicht die Farben.

ich habe es nun so umgesetzt:

<script type="text/javascript">
<!--
function farb(){
gr=1;
g=2;
r=3;
t=document.getElementById('tabelle');
for (var i=0;i<t.rows.length;i++){
d=t.rows[i].cells[0].innerHTML;
if (d<gr){t.rows[i].style.backgroundColor='#00FF00';
} else if (d<g){t.rows[i].style.backgroundColor='#FFFF00';
}else if (d<r){t.rows[i].style.backgroundColor='#FF0000';
}else if (d>g){t.rows[i].style.backgroundColor='#000000';
}
}
}
//-->