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>