您当前位置：首页 > web前端 > 特效 > 基于css仿制的excel表格特效可以输入文字

基于css仿制的excel表格特效可以输入文字

来源：程序员人生发布时间：2014-06-10 17:00:46 阅读次数：4758次

　　今天晚上破宽带慢的不行，干什么都慢，于是用css和table写了一款类似excel表格效果，也想加点JS实现增加一行和恢复效果，但是最终由于时间问题没有写出来，供大家参考吧，如果有什么问题，欢迎给wfuyu.com留言哦。

　　演示：

<html><head><title>直接输入的Excel表格</title><style></style></head><body><form method="post"><table class="formdata"><caption>公司销售统计表 2004～2007</caption><tr><th></th><th scope="col">2004</th><th scope="col">2005</th><th scope="col">2006</th><th scope="col">2007</th></tr><tr><th scope="row">硬盘(Hard Disk)</th><td><input type="text" name="harddisk2004" id="harddisk2004"></td><td><input type="text" name="harddisk2005" id="harddisk2005"></td><td><input type="text" name="harddisk2006" id="harddisk2006"></td><td><input type="text" name="harddisk2007" id="harddisk2007"></td></tr><tr><th scope="row">主板(Mainboard)</th><td><input type="text" name="mainboard2004" id="mainboard2004"></td><td><input type="text" name="mainboard2005" id="mainboard2005"></td><td><input type="text" name="mainboard2006" id="mainboard2006"></td><td><input type="text" name="mainboard2007" id="mainboard2007"></td></tr><tr><th scope="row">内存条(Memory Disk)</th><td><input type="text" name="memory2004" id="memory2004"></td><td><input type="text" name="memory2005" id="memory2005"></td><td><input type="text" name="memory2006" id="memory2006"></td><td><input type="text" name="memory2007" id="memory2007"></td></tr><tr><th scope="row">机箱(Case)</th><td><input type="text" name="case2004" id="case2004"></td><td><input type="text" name="case2005" id="case2005"></td><td><input type="text" name="case2006" id="case2006"></td><td><input type="text" name="case2007" id="case2007"></td></tr><tr><th scope="row">电源(Power)</th><td><input type="text" name="power2004" id="power2004"></td><td><input type="text" name="power2005" id="power2005"></td><td><input type="text" name="power2006" id="power2006"></td><td><input type="text" name="power2007" id="power2007"></td></tr><tr><th scope="row">CPU风扇(CPU Fan)</th><td><input type="text" name="cpufan2004" id="cpufan2004"></td><td><input type="text" name="cpufan2005" id="cpufan2005"></td><td><input type="text" name="cpufan2006" id="cpufan2006"></td><td><input type="text" name="cpufan2007" id="cpufan2007"></td></tr><tr><th scope="row">总计(Total)</th><td><input type="text" name="total2004" id="total2004"></td><td><input type="text" name="total2005" id="total2005"></td><td><input type="text" name="total2006" id="total2006"></td><td><input type="text" name="total2007" id="total2007"></td></tr></table><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"><input type="reset" value="Reset All" class="btn"></p></form></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 优化SQLServer数据库服务器内存配置的策略

下一篇 MySQL配置文件my.cnf中文版对照大全

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点

基于css仿制的excel表格特效 可以输入文字

基于css仿制的excel表格特效可以输入文字