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

发布时间：2018-08-16 09:42:54 所属栏目：专访来源：站长网

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

　　今天晚上破宽带慢的不行，干什么都慢，于是用css和table写了一款类似excel表格效果，也想加点JS实现增加一行和恢复效果，但是最终由于时间问题没有写出来，供大家参考吧，如果有什么问题，欢迎给veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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