AJAX仿EXCEL表格功能_javascript技巧

来源：比熊情感

<HTML><HEAD><TITLE>仿Excel表格演示</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<META http-equiv=MSThemeCompatible content=No> 
 
//////////////////////////////////////////变量—初始化/////////////////////////////////////// 
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(); 
} 
} 
//////////////////////////////////////////数据发送/////////////////////////////////////// 
//--> 
 
<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> 发送数据</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需刷新才能执行]

显示全文

全部频道

AJAX仿EXCEL表格功能_javascript技巧