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

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

　　演示：

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

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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