AJAX 仿EXCEL表格功能

來源:互聯網
上載者:User

<!-- saved from url=(0041)http://fslh.wisea.cn/mysoft/sim_excel.htm --><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="MSThemeCompatible" content="No"><br /><style type="text/css">BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e9edf7 } #tbBackground { BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center } #tbData { BACKGROUND-COLOR: #dde3ec } #tbData TD { BACKGROUND-COLOR: #ffffff } #tbData INPUT { WIDTH: 50px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } #tbData .checkbox { WIDTH: 15px } #tbData THEAD { } #tbTopOpt A { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px solid; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px solid; WIDTH: 80px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f8f9fc; TEXT-DECORATION: none } #tbTopOpt A:hover { BACKGROUND-COLOR: #dde3ec } #tbBomOpt A { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #999999 1px solid; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #999999 1px solid; WIDTH: 80px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f8f9fc; TEXT-DECORATION: none } #tbBomOpt A:hover { BACKGROUND-COLOR: #dde3ec } #tbData A { COLOR: #000000; TEXT-DECORATION: none } #divShowInput { BORDER-RIGHT: #dde3ec 1px solid; BORDER-TOP: #dde3ec 1px solid; DISPLAY: none; Z-INDEX: 10; LEFT: 350px; OVERFLOW: hidden; BORDER-LEFT: #dde3ec 1px solid; WIDTH: 100px; BORDER-BOTTOM: #dde3ec 1px solid; POSITION: absolute; TOP: 30px; BACKGROUND-COLOR: #f8f9fc } #divShowInput A { DISPLAY: block; WIDTH: auto; COLOR: #000000; BACKGROUND-COLOR: #f8f9fc; TEXT-ALIGN: center; TEXT-DECORATION: none } #divShowInput A:hover { BORDER-RIGHT: #ff0000 2px solid; BORDER-LEFT: #ff0000 2px solid; COLOR: #ff0000; BACKGROUND-COLOR: #dde3ec } #divShowInput P { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-BOTTOM-COLOR: #dde3ec; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f8f9fc; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: double } #divFoltupDiv { DISPLAY: none; Z-INDEX: 1001; RIGHT: 0px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='gb.png'); LEFT: 0px; PADDING-BOTTOM: 300px; WIDTH: 100%; BOTTOM: 0px; PADDING-TOP: 270px; POSITION: absolute; TOP: 0px; TEXT-ALIGN: center } UNKNOWN { BACKGROUND-IMAGE: url(gb.png); BACKGROUND-REPEAT: repeat } P#sendokBiginf { FONT-SIZE: 20px; COLOR: red } </style><p><meta content="MSHTML 6.00.2800.1400" name="GENERATOR"><p> 發送資料</p><p id="sendokBiginf"><p id="sendokinf"><table id="tbBackground" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><tbody><tr><td> </td></tr><tr><td><table id="tbData" cellspacing="1" cellpadding="0" width="750" align="center" border="0"><thead><tr><td height="25">全選</td><td>A1</td><td>A2</td><td>A3</td><td>A4</td><td>A5</td><td>A6</td><td>A7</td><td>A8</td><td>A9</td><td>A10</td><td>A11</td></tr></thead><tbody><tr><td><input class="checkbox" type="checkbox" value="checkbox" name="checkbox"></td><td><input name="A1"></td><td><input name="A2"></td><td><input name="A3"></td><td><input name="A4"></td><td><input name="A5"></td><td><input name="A6"></td><td><input name="A7"></td><td><input name="A8"></td><td><input name="A9"></td><td><input name="A10"></td><td><input name="A11"></td></tr></tbody></table></td></tr><tr><td><table id="tbBomOpt" cellspacing="0" cellpadding="0" width="700" align="center" border="0"><tbody><tr><td width="125" height="40">複製所選</td><td width="537">刪除所選</td><td width="537">清空所有</td><td width="537">提交</td><td width="38"> </td></tr></tbody></table></td></tr></tbody></table><hr />操作方法<br />一<br />鍵盤操作<br />1.Insert鍵增加一行,並複製最後一行內容,Delete鍵刪除最後一行,該操作用以調節表格總大小;<br />2.Tab鍵橫向移動游標,Enter鍵縱向移動游標,符合Excle使用者習慣;<br />二<br />頁面操作<br />1.全選:選擇全部行,再次執行釋放全部行;<br />2.複製所選:複製已經選擇的行及其內容;<br />3.刪除所選:刪除已經選擇的行;<br />4.清空所選:清除所有儲存格(input)中的內容;<br />5.提交:發送資料內容到伺服器<br />三<br />智能操作<br />雙擊儲存格將快顯功能表,菜單自動收集該列上所有不重複的已輸入內容,為重複輸入資料提供了方便。<br />
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.