您正在使用IPV4(3.236.214.224)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!      
广告位招租中
2021年 建党节 9
2021年 建军节 40
2022年 元 旦 193
2022年 春 节 224
 
  • 您现在的位置:首页 >> JS >> 内容

    AJAX仿EXCEL表格功能

    内容摘要: !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd'!-- saved from url=(0041)http://fslh.wisea.cn/mysoft/sim_ex......

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    <!-- saved from url=(0041)http://fslh.wisea.cn/mysoft/sim_excel.htm -->

    <HTML><HEAD><TITLE>仿Excel表格演示</TITLE>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <META http-equiv=MSThemeCompatible content=No>

    <SCRIPT type=text/JavaScript>

    //////////////////////////////////////////变量—初始化///////////////////////////////////////

    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<=dbinputs.length-1;i++){

    dbinputs[i].onfocus=stopListen;

    dbinputs[i].onblur=beginListen;

    dbinputs[i].ondblclick=showDiv;

    dbinputs[i].onmouseover=onChangTrColor;

    dbinputs[i].onmouseout=outChangTrColor;

    dbinputs[i].onclick=readyedit;

    dbinputs[i].onkeydown=gonext;

    }

    }

    function otherFill (){

    var Bt_selectAll = document.getElementById("Bt_selectAll");

    Bt_selectAll.setAttribute("href","javascript:void 0");

    Bt_selectAll.onclick=selectAll;

    var Bt_delSelect = document.getElementById("Bt_delSelect");

    Bt_delSelect.setAttribute("href","javascript:void 0");

    Bt_delSelect.onclick=delSelect;

    var Bt_copySelect = document.getElementById("Bt_copySelect");

    Bt_copySelect.setAttribute("href","javascript:void 0");

    Bt_copySelect.onclick=copySelect;

    var Bt_allclear = document.getElementById("Bt_allclear");

    Bt_allclear.setAttribute("href","javascript:void 0");

    Bt_allclear.onclick=allClear;

    var Bt_sendData = document.getElementById("Bt_sendData");

    Bt_sendData.setAttribute("href","javascript:void 0");

    Bt_sendData.onclick=sendData;

    }

    //////////////////////////////////////////动作填充///////////////////////////////////////

    //////////////////////////////////////////ajax类///////////////////////////////////////

    function Ajax(url,recvT,stringS,resultF) {

    this.url = url;

    this.stringS = stringS;

    this.xmlHttp = this.createXMLHttpRequest();

    this.resultF = resultF;

    this.recvT = recvT;

    if (this.xmlHttp == null) {

    alert("erro");

    return;

    }

    var objxml = this.xmlHttp;

    var othis = this;

    objxml.onreadystatechange = function (){othis.handleStateChange()};

    }

    Ajax.prototype = {

    createXMLHttpRequest:function() {

    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}

    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}

    try { return new XMLHttpRequest(); } catch(e) {}

    return null;

    },

    createQueryString:function () {

    var queryString = this.stringS;

    return queryString;

    },

    get : function () {

    url = this.url;

    var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString();

    this.xmlHttp.open("GET",queryString,true);

    this.xmlHttp.send(null);

    },

    post : function() {

    url = this.url;

    var url = url + "?timeStamp=" + new Date().getTime();

    var queryString = this.createQueryString();

    this.xmlHttp.open("POST",url,true);

    this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    this.xmlHttp.send(queryString);

    },

    handleStateChange : function () {

    var xmlhttp = this.xmlHttp;

    var recvT = this.recvT;

    var resultF = this.resultF;

    if (xmlhttp.readyState == 4) {

    if (xmlhttp.status == 200) {

    resultF.call(this,recvT?xmlhttp.responseXML:xmlhttp.responseText);

    } else {

    alert("您所请求的页面有异常。");

    }

    }

    }

    }

    //////////////////////////////////////////ajax类///////////////////////////////////////

    //////////////////////////////////////////处理鼠标事件///////////////////////////////////////

    //表格变色

    function onChangTrColor(event) {

    var e = event || window.event;

    var obj = e.target || e.srcElement;

    obj.parentNode.style.backgroundColor = toBeColor;

    obj.style.backgroundColor = toBeColor;

    var inputs = obj.parentNode.parentNode.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++ ){

    inputs[i].style.backgroundColor = toBeColor;

    inputs[i].parentNode.style.backgroundColor = toBeColor;

    }

    }

    function outChangTrColor(event) {

    var e = event || window.event;

    var obj = e.target || e.srcElement;

    obj.parentNode.style.backgroundColor = backColor;

    obj.style.backgroundColor = backColor;

    var inputs = obj.parentNode.parentNode.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++ ){

    inputs[i].style.backgroundColor = backColor;

    inputs[i].parentNode.style.backgroundColor = backColor;

    }

    }

    //////////////////////////////////////////处理鼠标事件///////////////////////////////////////

    //////////////////////////////////////////处理页面操作///////////////////////////////////////

    //复制所选

    function copySelect(){

    var checkboxs = document.getElementsByName("checkbox");

    for (var i=0; i<checkboxs.length; i++) {

    if(checkboxs[i].checked == true){

    checkboxs[i].checked = false;

    copyTr(checkboxs[i]);

    checkboxs[i].checked = true;

    }

    }

    actionFill ();

    }

    function copyTr(obj) {

    var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];

    var Str = obj.parentNode.parentNode;

    var tr = Str.cloneNode(true);

    tbody.appendChild(tr);

    }

    //删除所选

    function delSelect(){

    var checkboxs = document.getElementsByName("checkbox");

    var tr = table.getElementsByTagName("tr");

    for (var i=0; i<checkboxs.length; i++) {

    if(tr.length==2){

    checkboxs[i].checked = false;

    return;

    }

    if(checkboxs[i].checked==true){

    removeTr(checkboxs[i]);

    i=-1;

    }

    }

    }

    function removeTr(obj) {

    var sTr = obj.parentNode.parentNode;

    sTr.parentNode.removeChild(sTr);

    }

    //全选按钮

    function selectAll() {

    var checkboxs = document.getElementsByName("checkbox");

    var mark = true;

    for (var i=0; i<checkboxs.length; i++) {

    if (checkboxs[i].checked==false){mark = false}

    }

    if (mark){

    for (var i=0; i<checkboxs.length; i++) {

    checkboxs[i].checked = false;

    }

    }else{

    for (var i=0; i<checkboxs.length; i++) {

    checkboxs[i].checked = true;

    }

    }

    }

    //鼠标点击聚焦

    function readyedit(event){

    var e = event || window.event;

    var obj = e.target || e.srcElement;

    obj.select();

    }

    //清空

    function allClear(){

    var inputs = tbody.getElementsByTagName("input");

    for (var i=0;i<inputs.length;i++) {

    inputs[i].value="";

    }

    }

    //全部删除

    function allDel(){

    var trs = tbody.getElementsByTagName("tr");

    //alert(trs.length);

    for(var i=1 ;i<=trs.length ;i++) {

    if(typeof(trs[i])!="undefined"){

    tbody.removeChild(trs[i]);

    i=0;

    }

    }

    }

    //////////////////////////////////////////处理页面操作///////////////////////////////////////

    //////////////////////////////////////////处理键盘操作///////////////////////////////////////

    //键盘事件

    function beginListen(){

    if(document.addEventListener){

    document.addEventListener("keydown",keyDown,true);

    }else{

    document.attachEvent("onkeydown",keyDown);

    }

    }

    function stopListen(){

    if(document.removeEventListener){

    document.removeEventListener("keydown",keyDown,true);

    }else{

    document.detachEvent("onkeydown",keyDown);

    }

    }

    //处理键盘事件

    function keyDown(event){

    var e = event || window.event;

    if(e.keyCode==45){addTr()}

    if(e.keyCode==46){delTr()}

    }

    //增加表格

    function addTr() {

    var sTr = tbody.getElementsByTagName("tr")[0];

    var tr = sTr.cloneNode(true);

    tbody.appendChild(tr);

    actionFill ();

    }

    //删除表格

    function delTr() {

    var tr = table.getElementsByTagName("tr");

    if(tr.length==2){return;}

    var lastTr = tr[tr.length-1];

    lastTr.parentNode.removeChild(lastTr);

    }

    //移动焦点

    function gonext(event) {

    var e = event || window.event;

    var obj = e.target || e.srcElement;

    if(e.keyCode==13){

    var nextobj = obj.parentNode.parentNode.nextSibling;

    var objindex = obj.parentNode.cellIndex;

    if(nextobj){

    if (nextobj.nodeType==3){

    var nextinput = nextobj.nextSibling.getElementsByTagName("input")[objindex];

    nextinput.focus();

    nextinput.select();

    }else{

    var nextinput = nextobj.getElementsByTagName("input")[objindex];

    nextinput.focus();

    nextinput.select();

    }

    }

    }

    }

    //////////////////////////////////////////处理键盘操作///////////////////////////////////////

    //////////////////////////////////////////处理按钮事件///////////////////////////////////////

    //自动填充

    var currentObj;

    function showDiv(event) {

    var e = event || window.event;

    var obj = e.target || e.srcElement;

    var eX = e.clientX;

    var eY = e.clientY;

    var sY = document.body.parentNode.scrollTop;

    var dY = eY + sY;

    var divShowInput = document.getElementById("divShowInput");

    divShowInput.style.top = dY + "px";

    divShowInput.style.left = eX+"px";

    divShowInput.style.display = "block";

    hideListen();

    currentObj = obj;

    ////智能菜单////

    fixMenu();

    //判断焦点位置

    var tdOrder = obj.parentNode.cellIndex;

    //填充标题标题

    var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0];

    var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder];

    document.getElementById("barTitle").innerHTML = tdTitle.innerHTML;

    //收集表格信息//判断重复

    var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr");

    var autoFillP = document.getElementById("autoFillP");

    var bankM = true;

    for (var i = 0; i < trs.length; i++ ){

    var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0].value;

    if (inputValue != "") {

    bankM = false;

    var menus = autoFillP.getElementsByTagName("a");

    if(menus.length > 0) {

    var beliveM = true;

    for (var j = 0; j < menus.length; j++ ){

    if(menus[j].firstChild.nodeValue == inputValue) {

    beliveM = false;

    }

    }

    if(beliveM){

    var Svalue = document.createElement("a");

    Svalue.setAttribute("href","javascript:void 0");

    Svalue.onclick = function () {fillInput(this)};

    var Stext = document.createTextNode(inputValue);

    Svalue.appendChild(Stext);

    autoFillP.appendChild(Svalue);

    }

    }else{

    var Svalue = document.createElement("a");

    Svalue.setAttribute("href","javascript:void 0");

    Svalue.onclick = function () {fillInput(this)};

    var Stext = document.createTextNode(inputValue);

    Svalue.appendChild(Stext);

    autoFillP.appendChild(Svalue);

    }

    }

    }

    if(bankM) {

    var Svalue = document.createElement("a");

    Svalue.setAttribute("href","javascript:void 0");

    var Stext = document.createTextNode("数据空");

    Svalue.appendChild(Stext);

    autoFillP.appendChild(Svalue);

    }

    }

    function fillInput(obj) {

    currentObj.value = obj.innerHTML;

    divShowInput.style.display = "none";

    }

    function clearInput() {

    currentObj.value = "";

    divShowInput.style.display = "none";

    }

    function hideDiv() {

    divShowInput.style.display = "none";

    stophide();

    }

    function hideListen(){

    if(document.addEventListener){

    document.addEventListener("click",hideDiv,true);

    }else{

    document.attachEvent("onclick",hideDiv);

    }

    }

    function stophide(){

    if(document.removeEventListener){

    document.removeEventListener("click",keyDown,true);

    }else{

    document.detachEvent("onclick",keyDown);

    }

    }

    //删除智能菜单已有数据

    function fixMenu() {

    var autoFillP = document.getElementById("autoFillP");

    var values = autoFillP.getElementsByTagName("a");

    for (var i = values.length-1; i >= 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 < inputNames.length-1; i++) {

    sendName[i]=inputNames[i+1].getAttribute("name");

    }

    var trnum = trs.length;

    var oknum = 0;

    for (var i = 0; i < trnum; i++) {

    var values = trs[i].getElementsByTagName("input");

    var postStringAry = new Array();

    for (var j = 0; j < values.length-1; j++) {

    postStringAry[j]=sendName[j]+"="+values[j+1].value;

    }

    var postString = postStringAry.join("&");

    function sendOk(revData){

    if(revData=="ok"){

    oknum++;

    sendokinf.innerHTML = "已成功发送 "+oknum+" 行 共"+trnum+" 行";

    sendokBiginf.innerHTML = trnum-oknum;

    if (trnum-oknum==0){

    divFoltupDiv.style.display = "none";

    allClear();

    allDel();

    }

    }

    }

    var SendAjax = new Ajax("isave.asp",0,postString,sendOk);

    SendAjax.post();

    }

    }

    //////////////////////////////////////////数据发送///////////////////////////////////////

    //-->

    </SCRIPT>

    <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>

    <DIV id=divFoltupDiv>

    <P><IMG alt=Loading src=""> 发送数据</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>全选</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>复制所选</A></TD>

    <TD width=537><A id=Bt_delSelect>删除所选</A></TD>

    <TD width=537><A id=Bt_allclear>清空所有</A></TD>

    <TD width=537><A id=Bt_sendData>提交</A></TD>

    <TD width=38> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

    <HR>

    操作方法<BR>一

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

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

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

    </BODY></HTML>

    手机扫描二维码可直达本页
      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/6/15 发布时间:12:34:56 点击:21 录入:齐天大圣
  • 上一篇:JavaScript实现复选框全选功能
  • 下一篇:无图片的圆角表格
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.5 Build 21.06.17(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021