智能表格[适合BS模式项目的录入页面]

智能表格[适合BS模式项目的录入页面]

说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充  这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用

 

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN "   " http://www.w3.org/TR/html4/loose.dtd " >
< html >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 " >
< meta http - equiv = " MSThemeCompatible "  content = " No " >
< title > 无标题文档 </ title >
< script type = " text/JavaScript " >
<!--
// 页面初始化 ///
beginListen();
// 页面初始化 ///
// ajax类 ///
function Ajax(url,recvT,stringS,resultF) {
     this .url  =  url;
     this .stringS  =  stringS;
     this .xmlHttp  =   this .createXMLHttpRequest();
     if  ( this .xmlHttp  ==   null ) {
        alert( " erro " );
         return ;
    }
    var objxml  =   this .xmlHttp;
    objxml.onreadystatechange  =  function (){Ajax.handleStateChange(objxml,recvT,resultF)};
}

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

Ajax.prototype.createQueryString  =  function () {
    var queryString  =   this .stringS;
     return  queryString;
}

Ajax.prototype. get   =  function () {
    url  =   this .url;
    var queryString  =  url + " ?timeStamp= "   +   new  Date().getTime()  +   " & "   +   this .createQueryString();
     this .xmlHttp.open( " GET " ,queryString, true );
     this .xmlHttp.send( null );
}

Ajax.prototype.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);
}
    
Ajax.handleStateChange  =  function (xmlHttp,recvT,resultF) {
     if  (xmlHttp.readyState  ==   4 ) {
         if  (xmlHttp.status  ==   200 ) {
        resultF(recvT ? xmlHttp.responseXML:xmlHttp.responseText);
        }  else  {
        alert( " 您所请求的页面有异常。 " );
        }
    }
}
// ajax类 ///

// 处理鼠标事件 ///
// 表格变色
var toBeColor  =   " #F8F9FC " ;
var backColor  =   " #FFFFFF " ;
function onChangTrColor(obj) {
    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(obj) {
    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 ;
        }
    }
}

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 table  =  document.getElementById( " tbData " );
    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 beginListen(){
     if (document.addEventListener){
    document.addEventListener( " keydown " ,keyDown, true );
    } else {
    document.attachEvent( " onkeydown " ,keyDown);
    }
}
function stopListen(){
    document.detachEvent( " onkeydown " ,keyDown);
}

// 处理键盘事件
function keyDown( event ){
     if ( event .keyCode == 13 ){addTr()}
     if ( event .keyCode == 46 ){delTr()}
}

// 增加表格
function addTr() {
    var tbody  =  document.getElementById( " tbData " ).getElementsByTagName( " tbody " )[ 0 ]; 
    var sTr  =  tbody.getElementsByTagName( " tr " )[ 0 ];
    var tr  =   sTr.cloneNode( true );
    tbody.appendChild(tr);
}

// 增加表格
function addTr() {
    var tbody  =  document.getElementById( " tbData " ).getElementsByTagName( " tbody " )[ 0 ]; 
    var trs  =  tbody.getElementsByTagName( " tr " );
    var sTr  =  trs[trs.length - 1 ];
    var tr  =   sTr.cloneNode( true );
    tbody.appendChild(tr);
}

// 删除表格
function delTr() {
    var table  =  document.getElementById( " tbData " );
    var tr  =  table.getElementsByTagName( " tr " );
     if (tr.length == 2 ){ return ;}
    var lastTr  =  tr[tr.length - 1 ];
    lastTr.parentNode.removeChild(lastTr);
}


// 处理键盘操作 ///

// 处理按钮事件 ///
// 自动填充
var currentObj;
function showDiv( event ,obj) {
    var eX  =   event .clientX;
    var eY  =   event .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 " ;
    currentObj  =  obj;
     /// /智能菜单 /// /
    fixMenu();
     // 判断焦点位置
    var tds  =  obj.parentNode.parentNode.getElementsByTagName( " td " );
    var tdOrder;
     for  (var i  =   0 ; i  <  tds.length; i ++  ){
         if (tds[i]  ===  obj.parentNode){
            tdOrder  =  i;
        }
    }
     // 填充标题标题
    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;
    var divShowInput  =  document.getElementById( " divShowInput " );
    divShowInput.style.display  =   " none " ;
}

function clearInput() {
    currentObj.value  =   "" ;
    var divShowInput  =  document.getElementById( " divShowInput " );
    divShowInput.style.display  =   " none " ;
}

function hideDiv(obj) {
    obj.parentNode.style.display  =   " none " ;
}

// 删除智能菜单已有数据
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 sendName  =   new  Array( " ok " , " A1 " , " A2 " , " A3 " , " A4 " , " A5 " , " A6 " , " A7 " , " A8 " , " A9 " , " A10 " , " A11 " );
    var trs  =  document.getElementById( " tbData " ).getElementsByTagName( " tbody " )[ 0 ].getElementsByTagName( " tr " );
     for  (var i  =   0 ; i  <  trs.length; i ++ ) {
        var sendValue  =   new  Array();
        var values  =  trs[i].getElementsByTagName( " input " );
        var postString  =  sendName[ 1 ]  +   " = "   +  values[ 1 ].value;;
         for  (var j  =   2 ; j  <  values.length; j ++ ) {
            postString  =  postString  +   " & "   +  sendName[j]  +   " = "   +  values[j].value;
        }
        var SendAjax  =   new  Ajax( " isave.asp " , 0 ,postString,sendok);
        SendAjax.post();
        function sendok(revData){
            alert(revData);
        }
    }
}



// 数据发送 ///


// -->
</ script >
< style type = " text/css " >
<!--
body {
    font - family: Arial, Helvetica, sans - serif;
    font - size: 12px;
    background - color: #E9EDF7;
}
#tbBackground {
    background - color:#FFFFFF;
    text - align:center;
}
#tbData {
    background - color:#DDE3EC;
}
#tbData td {
    background - color:#FFFFFF;
}
#tbData input {
    width:50px;
    border:none;
}
#tbData .checkbox {
    width:15px;
}

#tbData thead {
}

#tbTopOpt a{
    display:block;
    width:80px;
    padding:5px;
    background - color:#F8F9FC;
    border:solid 1px # 999999 ;
    color:# 000000 ;
    text - decoration: none;
}
#tbTopOpt a:hover{
    background - color:#DDE3EC;
}
#tbBomOpt a{
    display:block;
    width:80px;
    padding:5px;
    background - color:#F8F9FC;
    border:solid 1px # 999999 ;
    color:# 000000 ;
    text - decoration: none;
}
#tbBomOpt a:hover{
    background - color:#DDE3EC;
}
#tbData a{
    color:# 000000 ;
    text - decoration: none;
}

#divShowInput {
    position:absolute;
    top:30px;
    left:350px;
    z - index: 10 ;
    background - color:#F8F9FC;
    display:none;
    border:solid 1px #DDE3EC;
    width:100px;
    overflow:hidden;
}
#divShowInput a {
    display:block;
    background - color:#F8F9FC;
    color:# 000000 ;
    text - decoration: none;
    text - align:center;
    width:auto;
}
#divShowInput a:hover {
    background - color:#DDE3EC;
    border - left:solid 2px #FF0000;
    border - right:solid 2px #FF0000;
    color:#FF0000;
}

#divShowInput p {
    cursor:hand;
    margin: 0 ;
    padding: 0 ;
    background - color:#F8F9FC;
    text - align:center;
    border - bottom: double  #DDE3EC;
}
-->
</ style >
</ head >

< body >
< div id = " divShowInput " >
     < p id = " barTitle "  onClick = " hideDiv(this) " ></ p >
     < p id = " defComP "  onClick = " hideDiv(this) " >
     < a href = " javascript:void 0 "  onClick = " clearInput() " > 清空 </ a >
     </ p >
     < p id = " autoFillP " >
     < a href = " javascript:void 0 "  onClick = " fillInput(this) " > Llinzzi </ a >
     < a href = " javascript:void 0 "  onClick = " fillInput(this) " > Huanhuan </ a >
     < a href = " javascript:void 0 "  onClick = " fillInput(this) " > Tom.com </ a >
     < a href = " javascript:void 0 "  onClick = " fillInput(this) " > 超级长的长长长长长长 </ a >
     </ p >
</ div >
< table id = " tbBackground "  width = " 760 "  border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 " >
   < tr >
     < td >< table id = " tbTopOpt "  width = " 700 "  border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 " >
       < tr >
         < td height = " 40 "  width = " 125 " >< a href = " javascript:void 0 "  onClick = " copySelect() " > 复制所选 </ a ></ td >
         < td width = " 537 " >< a href = " javascript:void 0 "  onClick = " delSelect() " > 删除所选 </ a ></ td >
         < td width = " 38 " >   </ td >
       </ tr >
     </ table ></ td >
   </ tr >
   < tr >
     < td >< table id = " tbData "  width = " 750 "  border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 1 " >
     < thead >
       < tr >
         < td height = " 25 "   >< a href = " javascript:void 0 "  onClick = " 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 "  name = " checkbox "  value = " checkbox " ></ td >
         < td >< input name = " A1 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A2 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A3 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A4 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A5 "  type = " text "   onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A6 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A7 "  type = " text "   onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A8 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A9 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A10 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
         < td >< input name = " A11 "  type = " text "  onFocus = " stopListen() "  onBlur = " beginListen() "  onDblClick = " showDiv(event,this) "  onMouseOver = " onChangTrColor(this) "  onMouseOut = " outChangTrColor(this) " ></ td >
       </ tr >
       </ tbody >
     </ table ></ td >
   </ tr >
   < tr >
     < td >< table width = " 700 "   border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 "  id = " tbBomOpt " >
       < tr >
         < td height = " 40 "  width = " 125 " >< a href = " javascript:void 0 "  onClick = " copySelect() " > 复制所选 </ a ></ td >
         < td width = " 537 " >< a href = " javascript:void 0 "  onClick = " delSelect() " > 删除所选 </ a ></ td >
         < td width = " 537 " >< a href = " javascript:void 0 "  onClick = " sendData() " > 提交 </ a ></ td >
         < td width = " 38 " >   </ td >
       </ tr >
     </ table ></ td >
   </ tr >
</ table >
</ body >
</ html >