Ajax动态报表，可适时添加行、删除行、复制行

Ajax动态表格，可适时添加行、删除行、复制行
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;HEAD&gt;&lt;TITLE&gt;JavaScript仿Excel表格演示&lt;/TITLE&gt;&lt;META http-equiv=Content-Type content="text/html; charset=utf-8"&gt;&lt;SCRIPT type=text/JavaScript&gt;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&lt;=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;}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("您所请求的页面有异常。");}}}}//表格变色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 &lt; 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 &lt; 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&lt;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&lt;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&lt;checkboxs.length; i++) {if (checkboxs[i].checked==false){mark = false}}if (mark){for (var i=0; i&lt;checkboxs.length; i++) {checkboxs[i].checked = false;}}else{for (var i=0; i&lt;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&lt;inputs.length;i++) {inputs[i].value="";}}//全部删除function allDel(){var trs = tbody.getElementsByTagName("tr");//alert(trs.length);for(var i=1 ;i&lt;=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 &lt;  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 &gt; 0) {var beliveM = true;for (var j = 0; j &lt; 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 &gt;= 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 &lt; inputNames.length-1; i++) {sendName[i]=inputNames[i+1].getAttribute("name");}var trnum = trs.length;var oknum = 0;for (var i = 0; i &lt; trnum; i++) {var values = trs[i].getElementsByTagName("input");var postStringAry = new Array();for (var j = 0; j &lt; 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();}}//--&gt;&lt;/SCRIPT&gt;&lt;STYLE type=text/css&gt;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}&lt;/STYLE&gt;&lt;META content="MSHTML 6.00.2800.1400" name=GENERATOR&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;DIV id=divFoltupDiv&gt;&lt;P&gt;&lt;IMG alt=Loading src=""&gt; 发送数据&lt;/P&gt;&lt;P id=sendokBiginf&gt; &lt;/P&gt;&lt;P id=sendokinf&gt; &lt;/P&gt;&lt;/DIV&gt;&lt;TABLE id=tbBackground cellSpacing=0 cellPadding=0 width=760 align=centerborder=0&gt;&lt;TBODY&gt;&lt;TR&gt;&lt;TD&gt; &lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD&gt;&lt;TABLE id=tbData cellSpacing=1 cellPadding=0 width=750 align=centerborder=0&gt;&lt;THEAD&gt;&lt;TR&gt;&lt;TD height=25&gt;&lt;A id=Bt_selectAll&gt;全选&lt;/A&gt;&lt;/TD&gt;&lt;TD&gt;A1&lt;/TD&gt;&lt;TD&gt;A2&lt;/TD&gt;&lt;TD&gt;A3&lt;/TD&gt;&lt;TD&gt;A4&lt;/TD&gt;&lt;TD&gt;A5&lt;/TD&gt;&lt;TD&gt;A6&lt;/TD&gt;&lt;TD&gt;A7&lt;/TD&gt;&lt;TD&gt;A8&lt;/TD&gt;&lt;TD&gt;A9&lt;/TD&gt;&lt;TD&gt;A10&lt;/TD&gt;&lt;TD&gt;A11&lt;/TD&gt;&lt;/TR&gt;&lt;/THEAD&gt;&lt;TBODY&gt;&lt;TR&gt;&lt;TD&gt;&lt;INPUT class=checkbox type=checkbox value=checkboxname=checkbox&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C1&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C2&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C3&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C4&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C5&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C6&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C7&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C8&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C9&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C10&gt;&lt;/TD&gt;&lt;TD&gt;&lt;INPUT name=C11&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD&gt;&lt;TABLE id=tbBomOpt cellSpacing=0 cellPadding=0 width=700 align=centerborder=0&gt;&lt;TBODY&gt;&lt;TR&gt;&lt;TD width=125 height=40&gt;&lt;A id=Bt_copySelect&gt;复制所选&lt;/A&gt;&lt;/TD&gt;&lt;TD width=537&gt;&lt;A id=Bt_delSelect&gt;删除所选&lt;/A&gt;&lt;/TD&gt;&lt;TD width=537&gt;&lt;A id=Bt_allclear&gt;清除所有&lt;/A&gt;&lt;/TD&gt;&lt;TD width=537&gt;&lt;A id=Bt_sendData&gt;提交数据&lt;/A&gt;&lt;/TD&gt;&lt;TD width=38&gt; &lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/BODY&gt;&lt;/HTML&gt;
Ajax动态报表可适时添加行、删除行、

热点推荐
