AJAX 仿EXCEL表格功能

<！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> <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><P><IMG alt=Loading src=""> 发送数据</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><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>复制所选</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.提交：发送数据内容到服务器三 智能操作双击单元格将弹出菜单，菜单自动收集该列上所有不重复的已输入内容，为重复输入数据提供了方便。</BODY></HTML>

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