AJAX 仿EXCEL表格功能

仿Excel表格演示代码，非常不错。

<!-- saved from url=(0041)http://fslh.wisea.cn/mysoft/sim_excel.htm --><title>仿Excel表格演示</title> 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-600'); 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-600); BACKGROUND-REPEAT: repeat } P#sendokBiginf { FONT-SIZE: 20px; COLOR: red } <P> 发送数据</P> <P id="sendokBiginf"> </P> <P id="sendokinf"> </P> <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></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></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.提交：发送数据内容到服务器三 智能操作双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]您可能感兴趣的文章:

• ASP.NET下将Excel表格中的数据规则的导入数据库思路分析及实现
• VBS实现将Excel表格保存为txt文本
• asp读取excel表名的实现代码
• asp.net动态获取Excel表名的函数代码
• SQL高级应用之使用SQL查询Excel表格数据的方法
• Asp.Net数据输出到EXCEL表格中
• SQL直接操作excel表(查询/导入/插入)

• AJAX
• EXCEL

相关文章

• 基于JS实现数字+字母+中文的混合排序方法

  这篇文章主要介绍了基于JS实现数字+字母+中文的混合排序方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下 2016-06-06

• 浅析JavaScript中break、continue和return的区别

  这篇文章主要介绍了JavaScript中break、continue和return的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下 2016-11-11

• JS闭包原理与应用经典示例

  这篇文章主要介绍了JS闭包原理与应用,结合实例形式较为详细的分析了javascript闭包的原理、应用及相关操作注意事项,需要的朋友可以参考下 2018-12-12

• Openlayers绘制地图标注

  这篇文章主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2020-09-09

• 微信小程序云开发实现数据添加、查询和分页

  这篇文章主要为大家详细介绍了微信小程序云开发实现数据添加、查询和分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2019-05-05

• js获取客户端网卡的IP地址、MAC地址

  这篇文章主要介绍了js获取客户端网卡的IP地址、MAC地址的方法,需要的朋友可以参考下 2014-03-03

• JavaScript 事件入门知识

  这篇文章主要介绍了JavaScript 事件入门知识,需要的朋友可以参考下 2015-04-04

• js中判断文本框是否为空的两种方法

  js中判断文本框是否为空的两种方法，需要的朋友可以参考下。 2011-07-07

• 原生js编写autoComplete插件

  这篇文章主要为大家详细介绍了原生js编写的autoComplete插件，感兴趣的小伙伴们可以参考一下 2016-04-04

• 微信小程序实现转盘抽奖

  这篇文章主要为大家详细介绍了微信小程序实现转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2020-09-09

最新评论

大家感兴趣的内容

• 1js刷新页面方法大全
• 2JS删除数组里的某个元素方法
• 3JS中setTimeout()的用法详解
• 4JS截取字符串常用方法详细整理
• 5js页面跳转常用的几种方式
• 6js数组与字符串的相互转换方法
• 7JS打开新窗口的2种方式
• 8JS设置cookie、读取cookie、删除
• 9js保留两位小数方法总结
• 10js 将json字符串转换为json对象的

最近更新的内容

• 微信小程序的授权实现过程解析
• JavaScript实现节点的删除与序号重建实例
• 详解Javacript和AngularJS中的Promises
• Javascript 文件夹选择框的两种解决方案
• bootstrap fileinput组件整合Springmvc上
• 浅析微信扫码登录原理(小结)
• csdn 批量接受好友邀请
• Bootstrap开关(switch)控件学习笔记分享
• javascript实现PC网页里的拖拽效果
• 微信小程序点击保存图片到本机功能

常用在线小工具

微信投稿脚本任务在线工具

关注微信公众号

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 本站 版权所有

以上就是AJAX 仿EXCEL表格功能的详细内容，更多请关注本站其它相关文章！