站长资源 网络编程

AJAX 仿EXCEL表格功能

整理:jimmy2026/9/22浏览2次

简介仿Excel表格演示 BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e9edf7 } #tbBackground { BACKGROUND-COLOR: #ffffff

<!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>  <P><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/');"><img src="/UploadFiles/2021-04-02/" alt="AJAX 仿EXCEL表格功能" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 发送数据</P> <P id=sendokBiginf>&nbsp;</P> <P id=sendokinf>&nbsp;</P>    &nbsp;    <THEAD>  全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11</THEAD>   <INPUT class=checkbox type=checkbox value=checkbox name=checkbox> <INPUT name=A1> <INPUT name=A2> <INPUT name=A3> <INPUT name=A4> <INPUT name=A5> <INPUT name=A6> <INPUT name=A7> <INPUT name=A8> <INPUT name=A9> <INPUT name=A10> <INPUT name=A11>      复制所选 删除所选 清空所有 提交 &nbsp; <HR> 操作方法一 键盘操作1.Insert键增加一行，并复制最后一行内容，Delete键删除最后一行，该操作用以调节表格总大小；2.Tab键横向移动光标，Enter键纵向移动光标，符合Excle用户习惯；二 页面操作1.全选：选择全部行，再次执行释放全部行；2.复制所选：复制已经选择的行及其内容；3.删除所选：删除已经选择的行；4.清空所选：清除所有单元格(input)中的内容；5.提交：发送数据内容到服务器三 智能操作双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。</BODY></HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：javascript 图片上传预览-兼容标准

下一篇：选择指定数量后checkbox不可选(变灰)javascript代码

站长资源 网络编程

AJAX 仿EXCEL表格功能

最新资源

一句话新闻