CSS/JS zum Schattieren von <td> als Balkendiagramm?

Question

Ich würde gerne eine <td> Zelle, um einen Prozentwert in der Zelle daneben visuell darzustellen. Ich werde den Prozentsatz eingeben und möchte ihn wie einen Balken für ein Diagramm schattieren. Hat jemand versucht, das zu tun und wäre es einfacher, es mit CSS oder JS-Funktion zu tun? Ich verwende eine html/php-Kombination auf der Seite.

Answer 1

Hier ist ein einfaches Beispiel dafür, wie es gemacht werden könnte. Es ist wirklich nur eine Frage der grundlegenden CSS:

http://jsfiddle.net/e5wRA/1/

Aktualisierung der Leiste

Javascript (jQuery):

var percent = 20;

$('.bar').css({
    width: percent.toString() + '%'
});

PHP:

<tr>
    <td><?php echo $percent; ?>%</td>
    <td class="graph"><div class="bar" style="width:<?php echo $percent; ?>%"></div></td>
</tr>

Answer 2

Im Allgemeinen ist es eine gute Idee, CSS-Klassen zur Gestaltung von Elementen zu verwenden. Dann verwenden Sie Javascript, um den Klassennamen nach Bedarf zu ändern. Mit dieser Methode können Sie die Darstellung (CSS) vom Verhalten (Javascript) trennen.