I would like to use a <td>
cell to visually "graph" a percent that's in the cell next to it. I will be bringing in the percent and want to shade it like a bar for a graph. Has anyone tried to do that and would it be easier to do it with CSS or JS function? I am using a html/php combo on the page.
Here's a simple sample of how it could be done. It's really just a matter of basic CSS:
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>
In general, it’s a good idea to use CSS classes to style elements. Then use Javascript to change the class name as needed. This method allows you to separate presentation (CSS) from behavior (javascript).