快捷導(dǎo)航

AJAX 仿EXCEL表格功能

更新時間：2009年06月01日 01:48:13 作者：

仿Excel表格演示代碼，非常不錯。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <HTML><HEAD><TITLE>仿Excel表格演示</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META http-equiv=MSThemeCompatible content=No>  <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> <META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD> <BODY> <div   class="vvxyksv9kd"   id=divFoltupDiv> <P><IMG alt=Loading src=""> 發(fā)送數(shù)據(jù)</P> <P id=sendokBiginf>&nbsp;</P> <P id=sendokinf>&nbsp;</P></DIV> <TABLE id=tbBackground cellSpacing=0 cellPadding=0 width=760 align=center border=0> <TBODY> <TR> <TD>&nbsp;</TD></TR> <TR> <TD> <TABLE id=tbData cellSpacing=1 cellPadding=0 width=750 align=center border=0> <THEAD> <TR> <TD height=25><A id=Bt_selectAll>全選</A></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><A id=Bt_copySelect>復(fù)制所選</A></TD> <TD width=537><A id=Bt_delSelect>刪除所選</A></TD> <TD width=537><A id=Bt_allclear>清空所有</A></TD> <TD width=537><A id=Bt_sendData>提交</A></TD> <TD width=38>&nbsp;</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <HR> 操作方法一 鍵盤操作1.Insert鍵增加一行，并復(fù)制最后一行內(nèi)容，Delete鍵刪除最后一行，該操作用以調(diào)節(jié)表格總大小；2.Tab鍵橫向移動光標(biāo)，Enter鍵縱向移動光標(biāo)，符合Excle用戶習(xí)慣；二 頁面操作1.全選：選擇全部行，再次執(zhí)行釋放全部行；2.復(fù)制所選：復(fù)制已經(jīng)選擇的行及其內(nèi)容；3.刪除所選：刪除已經(jīng)選擇的行；4.清空所選：清除所有單元格(input)中的內(nèi)容；5.提交：發(fā)送數(shù)據(jù)內(nèi)容到服務(wù)器三 智能操作雙擊單元格將彈出菜單，菜單自動收集該列上所有不重復(fù)的已輸入內(nèi)容，為重復(fù)輸入數(shù)據(jù)提供了方便。</BODY></HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: