提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

AJAX仿EXCEL表格功能

ExcelAJAX 功能 表格
2023-06-13 09:14:09 时间
仿Excel表格演示 BODY{ FONT-SIZE:12px;FONT-FAMILY:Arial,Helvetica,sans-serif;BACKGROUND-COLOR:#e9edf7 } #tbBackground{ BACKGROUND-COLOR:#ffffff;TEXT-ALIGN:center } #tbData{ BACKGROUND-COLOR:#dde3ec } #tbDataTD{ BACKGROUND-COLOR:#ffffff } #tbDataINPUT{ WIDTH:50px;BORDER-TOP-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-LEFT-STYLE:none;BORDER-BOTTOM-STYLE:none } #tbData.checkbox{ WIDTH:15px } #tbDataTHEAD{ } #tbTopOptA{ BORDER-RIGHT:#9999991pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#9999991pxsolid;DISPLAY:block;PADDING-LEFT:5px;PADDING-BOTTOM:5px;BORDER-LEFT:#9999991pxsolid;WIDTH:80px;COLOR:#000000;PADDING-TOP:5px;BORDER-BOTTOM:#9999991pxsolid;BACKGROUND-COLOR:#f8f9fc;TEXT-DECORATION:none } #tbTopOptA:hover{ BACKGROUND-COLOR:#dde3ec } #tbBomOptA{ BORDER-RIGHT:#9999991pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#9999991pxsolid;DISPLAY:block;PADDING-LEFT:5px;PADDING-BOTTOM:5px;BORDER-LEFT:#9999991pxsolid;WIDTH:80px;COLOR:#000000;PADDING-TOP:5px;BORDER-BOTTOM:#9999991pxsolid;BACKGROUND-COLOR:#f8f9fc;TEXT-DECORATION:none } #tbBomOptA:hover{ BACKGROUND-COLOR:#dde3ec } #tbDataA{ COLOR:#000000;TEXT-DECORATION:none } #divShowInput{ BORDER-RIGHT:#dde3ec1pxsolid;BORDER-TOP:#dde3ec1pxsolid;DISPLAY:none;Z-INDEX:10;LEFT:350px;OVERFLOW:hidden;BORDER-LEFT:#dde3ec1pxsolid;WIDTH:100px;BORDER-BOTTOM:#dde3ec1pxsolid;POSITION:absolute;TOP:30px;BACKGROUND-COLOR:#f8f9fc } #divShowInputA{ DISPLAY:block;WIDTH:auto;COLOR:#000000;BACKGROUND-COLOR:#f8f9fc;TEXT-ALIGN:center;TEXT-DECORATION:none } #divShowInputA:hover{ BORDER-RIGHT:#ff00002pxsolid;BORDER-LEFT:#ff00002pxsolid;COLOR:#ff0000;BACKGROUND-COLOR:#dde3ec } #divShowInputP{ 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 }

发送数据

 

 

  全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11 复制所选 删除所选 清空所有 提交  
操作方法 一 键盘操作 1.Insert键增加一行，并复制最后一行内容，Delete键删除最后一行，该操作用以调节表格总大小； 2.Tab键横向移动光标，Enter键纵向移动光标，符合Excle用户习惯； 二 页面操作 1.全选：选择全部行，再次执行释放全部行； 2.复制所选：复制已经选择的行及其内容； 3.删除所选：删除已经选择的行； 4.清空所选：清除所有单元格(input)中的内容； 5.提交：发送数据内容到服务器 三 智能操作 双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。

相关文章