AJAX 仿EXCEL表格功能

309 阅读 0 评论 204 点赞

我是靠谱客的博主聪慧钻石，这篇文章主要介绍AJAX 仿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 id=divFoltupDiv> 
<P><IMG alt=Loading src=""> 发送数据</P> 
<P id=sendokBiginf> </P> 
<P id=sendokinf> </P></DIV> 
<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> 
操作方法
一 
键盘操作
1.Insert键增加一行，并复制最后一行内容，Delete键删除最后一行，该操作用以调节表格总大小；
2.Tab键横向移动光标，Enter键纵向移动光标，符合Excle用户习惯；
二 
页面操作
1.全选：选择全部行，再次执行释放全部行；
2.复制所选：复制已经选择的行及其内容；
3.删除所选：删除已经选择的行；
4.清空所选：清除所有单元格(input)中的内容；
5.提交：发送数据内容到服务器
三 
智能操作
双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。
</BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]