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

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

來源：程序員人生發布時間：2014-06-10 17:00:46 閱讀次數：5174次

　　今天晚上破寬帶慢的不行，干什么都慢，于是用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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 優化SQLServer數據庫服務器內存配置的策略

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

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

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

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