AJAX 仿EXCEL表格功能

仿Excel表格演示

//////////////////////////////////////////变量—初始化///////////////////////////////////////
var toBeColor = "#F8F9FC";
var backColor = "#FFFFFF";
var tableId = "tbData";
var table;
var tbody;
var divShowInput;
window.onload=function(){
beginListen();
table = document.getElementById(tableId);
tbody = table.getElementsByTagName("tbody")[0];
actionFill ();
otherFill();
creatDiv();
divShowInput = document.getElementById("divShowInput");
}
function creatDiv(){
var filldiv = document.createElement("div");
filldiv.setAttribute("id","divShowInput");
var barp = document.createElement("p");
barp.setAttribute("id","barTitle");
barp.onclick=hideDiv;
var defComP = document.createElement("p");
defComP.setAttribute("id","defComP");
defComP.onclick=hideDiv;
var cleara = document.createElement("a");
cleara.setAttribute("href","javascript:void 0");
cleara.onclick=clearInput;
var clearatext = document.createTextNode("清空");
cleara.appendChild(clearatext);
defComP.appendChild(cleara);
var autoP = document.createElement("P");
autoP.setAttribute("id","autoFillP");
filldiv.appendChild(barp);
filldiv.appendChild(defComP);
filldiv.appendChild(autoP);
document.body.appendChild(filldiv);
}
//////////////////////////////////////////变量—_初始化///////////////////////////////////////
//////////////////////////////////////////动作填充///////////////////////////////////////
function actionFill (){
var dbinputs = tbody.getElementsByTagName("input");
for (var i = 1;i 0) {
var beliveM = true;
for (var j = 0; j = 0; i-- ){
autoFillP.removeChild(values[i]);
}
}
//////////////////////////////////////////处理按钮事件///////////////////////////////////////
//////////////////////////////////////////数据发送///////////////////////////////////////
//////////////////////////////////////////数据发送///////////////////////////////////////
function sendData() {
var divFoltupDiv = document.getElementById("divFoltupDiv");
divFoltupDiv.style.display = "block";
var sendokinf = document.getElementById("sendokinf");
var sendokBiginf = document.getElementById("sendokBiginf");
var sendName = new Array();
var trs = tbody.getElementsByTagName("tr");
var inputNames = trs[0].getElementsByTagName("input");
for (var i = 0; i

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
}

发送数据








 





























全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11








复制所选 删除所选 清空所有 提交  



操作方法

键盘操作
1.Insert键增加一行,并复制最后一行内容,Delete键删除最后一行,该操作用以调节表格总大小;
2.Tab键横向移动光标,Enter键纵向移动光标,符合Excle用户习惯;

页面操作
1.全选:选择全部行,再次执行释放全部行;
2.复制所选:复制已经选择的行及其内容;
3.删除所选:删除已经选择的行;
4.清空所选:清除所有单元格(input)中的内容;
5.提交:发送数据内容到服务器

智能操作
双击单元格将弹出菜单,菜单自动收集该列上所有不重复的已输入内容,为重复输入数据提供了方便。

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

(0)

相关推荐

  • asp读取excel表名的实现代码

    看代码: 复制代码 代码如下: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <% dim conn,rs,excelFileName excelFileName=Server.MapPath("Data/test.xls") set conn = Server.CreateObject("ADODB.Connection") conn.connectionstring=

  • SQL直接操作excel表(查询/导入/插入)

    复制代码 代码如下: --配置权限 EXEC sp_configure 'show advanced options', 1; GO RECONFIGURE; GO EXEC sp_configure 'Ad Hoc Distributed Queries', 1; GO RECONFIGURE; GO SQL SERVER 和EXCEL的数据导入导出 1.在SQL SERVER里查询Excel数据: -- ============================================

  • SQL高级应用之使用SQL查询Excel表格数据的方法

    复制代码 代码如下: exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Queries',1 reconfigure 复制代码 代码如下: SELECT * FROM OPENDATASOURCE('Microsoft.Jet.OLEDB.4.0', 'Data Source=E:\HaierWeb\MyWeb\Doc\abc.xls;Extended Pro

  • asp.net动态获取Excel表名的函数代码

    复制代码 代码如下: public string GetExcelFirstTableName(string excelFileName) { string tableName = null; if (File.Exists(excelFileName)) { using (OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet." + "OLEDB.4.0;Extended Properties=

  • VBS实现将Excel表格保存为txt文本

    希望能够找到个能给excel表另存为TXT的VBS代码,虽然另存为可以选择,但还是需要直接VBS执行这一步另存为TXT格式的,应该如何写代码呢? 有装Excel的话,就会比较简单,下面的是通用的不装Office也可以运行的,如下: VBScript code: 复制代码 代码如下: Set oShell = CreateObject("Shell.Application") Set oDir = oShell.BrowseForFolder(0,"选择目录",0)

  • Asp.Net数据输出到EXCEL表格中

    一.定义文档类型.字符编码 Response.Clear(); Response.Buffer= true; Response.Charset="utf-8"; //下面这行很重要, attachment 参数表示作为附件下载,您可以改成 online在线打开 //filename=FileFlow.xls 指定输出文件的名称,注意其扩展名和指定文件类型相符,可以为:.doc .xls .txt .htm Response.AppendHeader("Content-Disp

  • ASP.NET下将Excel表格中的数据规则的导入数据库思路分析及实现

    今天接到新的需求,要求将Excel表格中的数据显示在页面上. 我个人分析,首先要将Excel中的数据存到数据库中,再进行页面显示,本人菜鸟级别,以前没有做过读取Excel数据,研究了一下(主要是看别人的资料),写一下实现过程,我想写几篇关于Excel的,首先是规则的Excel数据导入,再有就是不规则的Excel数据导入,还有就是根据数据生成Excel. 下面开始:将规则的Excel导入数据库 首先看一下Excel结构,如图:  这是一个简单的.规整的Excel格式,将它导入到数据库中 复制代码

  • AJAX 仿EXCEL表格功能

    仿Excel表格演示 //////////////////////////////////////////变量-初始化/////////////////////////////////////// var toBeColor = "#F8F9FC"; var backColor = "#FFFFFF"; var tableId = "tbData"; var table; var tbody; var divShowInput; window.o

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • Android开发实现的导出数据库到Excel表格功能【附源码下载】

    本文实例讲述了Android开发实现的导出数据库到Excel表格功能.分享给大家供大家参考,具体如下: 之前一直在电脑上用Excel表格记录家庭帐单,不久前重装系统不小心干掉了,伤心了好久,那可是我记了五年的帐单呀!这段时间用的是随手记,好用但是不太符合我的习惯,所以我自己写了一个小小的帐单记录APP,App小到只有一个Activity.当然更多的需求我正在研发中,呵呵!现在已经完成了把每天记录的数据保存到Sqilte数据库中,然后可以导出到excel表格.代码也是借助网上的一些资料写成的,代码

  • vue导入处理Excel表格功能步骤详解

    目录 1. 前言 2.vue导入Excel表格 2.1 使用ElementUI中的upload组件 2.2 使用input文件上传 3. 总体代码与效果 4. 总结 1. 前言 最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据:当然自己手撸一个工具没有那么多时间,本文只是借助现有的工具来做一下工具使用总结. 2.vue导入Excel表格 vue导入Excel表格主要有两种常用的方法,一个是借助ElementUI文件上传进行表格导入,另一个是自带的in

  • jQuery仿Excel表格编辑功能的实现代码

    在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制.Ctrl+C .Ctrl+V 等等. 另外在浏览器支持方面,它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera. 如何使用:     首先在页面中引入 jQuery 框架和 Handsontable 插件的相关 JS 和 CSS 文件,以下列出的两个是必要的,还有其它的是可选的,如果需要某个功能时就(参看demo)加上. 复制代码 代码如下: <script src="jquery.min

  • vue导出excel表格的新手详细教程

    目录 前言 一.安装vue-json-excel 二.main.js中引入 三.在代码中使用 四.数据 五.效果 六.一些常用参数 总结 前言 在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下 一.安装vue-json-excel npm install vue-json-excel -S 二.main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonEx

  • ThinkPHP实现ajax仿官网搜索功能实例

    本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码 代码如下: //搜索,如果在1不在0  function search(){      $keyword = $_POST['search'];      $Goods=M('goods');    //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是    //商城系统里面用到直接看产品ID      $map['goods_id|goods_n

  • Jquery ajax请求导出Excel表格的实现代码

    直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; dataParams[exportExcel] = 1; var params = $.param(dataParams); var url = host+"&"+params; $('<form method="post" action="' + ur

  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能.分享给大家供大家参考,具体如下: 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • 使用python对excel表格处理的一些小功能

    python对excel表格处理的一些小功能 功能概览pandas库的一些应用文件读入计算表格中每一行的英文单词数简单用textblob进行自然语言情感分析判断一行中是不是有两列值都与其他行重复(可推广至多列)对表格中的两列自定义函数运算判断表格中某列中是否有空对表格某列中时间格式的修正运用matplotlib画时间序列图,重叠图 功能概览 做数模模拟赛时学到的一些对表格处理的知识,为了方便自己以后查找,遂写成一篇文章,也希望能帮助大家:) pandas库的一些应用 文件读入 代码如下,每一句后

随机推荐