AJAX 仿EXCEL表格功能_javascript技巧

<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"> <div id="divFoltupDiv"> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="AJAX 仿EXCEL表格功能_javascript技巧" src="/default/index/img?u=" title="AJAX 仿EXCEL表格功能_javascript技巧"> 发送数据</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"><a id="Bt_selectAll" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">全选</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" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">复制所选</a></td> <td width="537"><a id="Bt_delSelect" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">删除所选</a></td> <td width="537"><a id="Bt_allclear" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">清空所有</a></td> <td width="537"><a id="Bt_sendData" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">提交</a></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.提交：发送数据内容到服务器 三 智能操作 双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]