php - CSS/JS 将 <td> 着色为条形图？

Question

我想使用 <td>单元格以直观地“绘制”旁边单元格中的百分比。我将引入百分比并希望将其像条形图一样着色。有没有人尝试过这样做，使用 CSS 或 JS 函数会更容易吗？我在页面上使用 html/php 组合。

Answer 1

这是一个如何完成的简单示例。这实际上只是基本 CSS 的问题:

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

更新栏

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>