http://be10.ods.org/51js/viewthread.php?action=attachment&aid=167

解决方案 »

  1. index.htm
    --------------------------------
    <html>
    <head>
    <!--
     * Title:  Table to edit online
     * Description: Use to table to input data to a form 
     * Copyright:  Copyright (c) 2003
     * Company:  weide
     * @author  weidegong(weidegong@yahoo.com.cn)
     * @version  3.2
     * Function  动态可编辑表格构成的表单,其中输入域及其输入形式可根据实际需要自行设置(参考本例Select),IE6测试通过
       将script和style定义放在页面head区;将如<table></table>区域拷贝至需要使用该表格的位置即可;最下方为参考按钮
       为了能在同一Form中使用多个表格,故将<table>放在form中,而不是将<TBODY>放在form中,这样导致提交的输入域的第一个值无效,如在JSP中:String strxs[]=request.getParameterValues("x");//则strxs[0]即为无效数据   thead.tr.th:定义表头,可以设置相应的列宽;th的数目需要同下面的td数目相同,以一一对应;其中"X"是固定列
       thead.tr.td.<input ... name=x>设置相应数据列对应的输入域的名字;其中第一列用于显示一个选择框
       tableData,默认<TR>的样式单名称;tableDataHit,高亮度显示时<TR>采用的样式单
       inputTableData,显示数据时表格中input输入域使用的样式单;inputTableDataHit,TR高亮度显示时,input使用的样式单
     * @History  1.0 从网上下载了例子,并略作修改
       2.0 使用CSS表单美化界面;增加一个模拟可编辑Select下拉框
       3.0 将addRow,deleteRow修改为带有对象类型参数的函数,使得在同一界面可使用可编辑表格的多个实例
       3.1 将addRow,deleteRow函数的参数修改为表格对象,更加方便;整理出onlineEditTable.css、onlineEditTable.js
       3.2 (2003-03-27)增加键盘导航功能,使用方向键或回车键均可
    onclick="alert('the '+(event.srcElement.parentElement.parentElement.rowIndex)+' row:'+event.srcElement.value)"
    --><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <LINK href="onlineEditTable.css" type=text/css rel=stylesheet>
    <script language="javascript" src="onlineEditTable.HTM"></script>
    </head>
    <body><form action="showPara.htm">
    <TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
    cellPadding=2 cellSpacing=1 cols=1 id=tableResource rules=rows width="100%" onKeyDown="navigateKeys()" onKeyUp="setKeyDown(false)">
    <thead><tr bgColor=#0a6846>
     <th class=thData width=1%>
     <input type=checkbox id=checkLineAll onclick=setOnlineEditCheckBox(getUpperObj(this,"TABLE"),this.checked) value="ON"></th><!--Fixed-->
     <th class=thData width=30%>标题一</th>
     <!--<th....................标题N...可定义多个-->
    </tr><TR style="display:none" bgColor=#e0e0e0 class=tableData onclick=lightonRow(this)> <TD class=scheduleButtonVisible ><input type=checkbox id=checkLine value="ON"></td><!--Fixed-->
     
     
     
     <TD><input class=inputTableData name=y size="20"></TD>
     <!--<TD><input...........name=...></TD>....可定义多个,与上面的<th>数目保持一致...-->
    </TR></thead><tbody>
    </tbody></TABLE></form>
    <p align=center><font size="2">*****=====下列按钮根据需要选定使用======*****</font></p><p align=center>
    <input type=button onclick="addRow(tableResource)" value="添加空数据行">
    <input type=button onclick="addRowis(tableResource,4)" value="在第4行添加空数据行">???
    <input type=button onclick="addInstanceRow(tableResource,['x','y','z'],['1','100','这是一个测试的例子'])" value="添加实例数据行">
    <br>
    <input type=button onclick="deleteRow(tableResource)" value="删除当前行">
    <input type=button onclick="clearzdRow(tableResource,3)" value="删除第3行">????
    <input type=button onclick="clearRow(tableResource)" value="删除全部">
    <input type=button onclick="setOnlineEditCheckBox(tableResource,true)" value="选中全部">
    </p></body>
    </html>
      

  2. onlineEditTable.css
    ----------------------------------------------------------------------.thData{
    BACKGROUND:0a6846;
    }
    .tableData {
    BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
    }
    .inputTableData {
    BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px;width:100%;
    }
    .tableDataSel {
    BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
    }
    .tableDataHit {
    BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
    }
    .inputTableDataHit {
    BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px;width:100%
    }
    .tableDataOver {
    BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
    }
    .scheduleButtonVisible {
    BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
    }
      

  3. onlineEditTable.HTM
    -------------------------------------------------//全局变量
    var inputFocus;//该变量记录当前焦点的input
    var bKeyDown=false;//记录键盘被按下的状态,当有键盘按下时其值为true
    var currentRow;  //保存当前行号rowIndexfunction setRowClass(obj,className){
     obj.className=className;
     var oldClass,toClass;
     if(className=="tableData")  {oldClass="inputTableDataHit";toClass="inputTableData";}
     if(className=="tableDataHit") {oldClass="inputTableData";toClass="inputTableDataHit";}
     var objsInput=obj.all;
     for(var i=0;i<objsInput.length;i++)
      if(objsInput[i].tagName=="INPUT")if(objsInput[i].className==oldClass)objsInput[i].className=toClass;
    }function lightonRow(obj){
     currentRow = obj.rowIndex;  /////////取得当前行号currentRow
     if(obj.tagName!="TR")return; //将所有未被选中的行取消高亮度现实
            var tableOnlineEdit=obj.parentElement;
            while(tableOnlineEdit.tagName!="TABLE")tableOnlineEdit=tableOnlineEdit.parentElement;
     var objsCheckBox=tableOnlineEdit.all("checkLine");
     for(var iCheckBox=1;iCheckBox<objsCheckBox.length;iCheckBox++)
      if(objsCheckBox[iCheckBox].checked==false) setRowClass(tableOnlineEdit.rows[iCheckBox+1],"tableData"); //当前点击行高亮度显示
     setRowClass(obj,"tableDataHit");
    }
    //得到obj的上级元素TagName
    function getUpperObj(obj,TagName){
     var strTagName=TagName.toUpperCase();
     var objUpper=obj.parentElement;
     while(objUpper){
      if(objUpper.tagName==strTagName) break;
      objUpper=objUpper.parentElement;
     }
     return objUpper;
    }function getPosition(obj,pos){
       var t=eval("obj."+pos);
       while(obj=obj.offsetParent){
          t+=eval("obj."+pos);
       }
       return t;
    }
    function showInputSelect(obj,objShow){
     inputFocus=obj;//记录当前焦点input至全局变量
     objShow.style.top =getPosition(obj,"offsetTop")+obj.offsetHeight+2;
     objShow.style.left=getPosition(obj,"offsetLeft");
     objShow.style.width=obj.offsetWidth;
     objShow.value=obj.value;
     objShow.style.display="block";
    }function setInputFromSelect(objTo,objShow){
     objTo.value=objShow.options[objShow.selectedIndex].value;
     //objShow.style.display="none";
    }function hideInput(obj){
     obj.style.display="none";
    }function clearRow(objTable){
      var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
      for (var i=tbodyOnlineEdit.children.length-1;i>=0;i--)
        tbodyOnlineEdit.deleteRow(i);
    }function deleteRow(objTable){
     var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
       tbodyOnlineEdit.deleteRow(currentRow-2);  //////currentRow在lightonRow()函数中定义
      currentRow = tbodyOnlineEdit.rows.length+1;  
      //重设置currentRow,假如当前行删除后没有选择别的行,就删除最后一行
      //也可以把它设置为null,在函数使用if语句判断currentRow有没有值,没有值就提示当前无选择行
      //不执行任何操作
    }//删除当前的行,获得点击的是第几个文本框;
    function deletedqRow(objTable){
     var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
      for (var i=tbodyOnlineEdit.children.length-1; i>=0 ; i-- )
      if (tbodyOnlineEdit.children[i].firstChild.firstChild.checked)
        tbodyOnlineEdit.deleteRow(i);
    }//删除指定行的数据
    function clearzdRow(objTable,n){
      var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
      if((tbodyOnlineEdit.children.length-1)>=0){tbodyOnlineEdit.deleteRow(n-1)}
    }//指定行获得焦点
    function tdfouces()
    {
     objTD=objTR.cells[nCell];
     var objs=objTD.all;
    }function addRow(objTable){
     var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
     var theadOnlineEdit=objTable.getElementsByTagName("THEAD")[0];
     var elm = theadOnlineEdit.lastChild.cloneNode(true);
     elm.style.display="";
     tbodyOnlineEdit.insertBefore(elm);
    }function addRowis(objTable,pos){
     var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
     var theadOnlineEdit=objTable.getElementsByTagName("THEAD")[0];
     var elm = theadOnlineEdit.lastChild.cloneNode(true);
     elm.style.display="";
     oTR = tbodyOnlineEdit.insertRow(pos-1);
     oTR.replaceNode(elm);
    }//将指定数据行的objRow的输入域strName设置为strValue
    function setInputValue(objRow,strName,strValue){
     var objs=objRow.all;
     for(var i=0;i<objs.length;i++){
      if(objs[i].name==strName)objs[i].value=strValue;
     }
    }//添加一个实例数据行
    function addInstanceRow(objTable,Names,Values){
     var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
     var theadOnlineEdit=objTable.getElementsByTagName("THEAD")[0];
     var elm = theadOnlineEdit.lastChild.cloneNode(true)
     elm.style.display="";
            for(var i=0;i<Names.length;i++)
              setInputValue(elm,Names[i],Values[i]);
     tbodyOnlineEdit.insertBefore(elm);
    }//将全部复选框设为指定值
    function setOnlineEditCheckBox(obj,value){
     var tbodyOnlineEdit=obj.getElementsByTagName("TBODY")[0];
     for (var i=tbodyOnlineEdit.children.length-1; i>=0 ; i-- )
      tbodyOnlineEdit.children[i].firstChild.firstChild.checked=value;
    }//为动态表格增加键盘导航功能,要使用该功能请在表格定义中增加事件处理onKeyDown="navigateKeys()" onKeyUp="setKeyDown(false)"
    //有一点点问题,当按下"->"跳转到下一输入域时,光标显示在第一个字符之后
    //建议仍然使用Tab键跳转
    function navigateKeys(){
     if(bKeyDown) return;
     bKeyDown=true;
     var elm=event.srcElement;
     if(elm.tagName!="INPUT") return;//默认只对INPUT进行导航,可自行设定 var objTD=elm.parentElement;
     var objTR=objTD.parentElement;
     var objTBODY=objTR.parentElement.parentElement;
     var objTable=objTBODY.parentElement; var nRow=objTR.rowIndex;
     var nCell=objTD.cellIndex; var nKeyCode=event.keyCode;
     switch(nKeyCode){
      case 37://<-
       if(getCursorPosition(elm)>0)return;
       nCell--;
       if(nCell==0){
        nRow--;//跳转到上一行
        nCell=objTR.cells.length-1;//最后一列
       }
       break;
      case 38://^
       nRow--;
       break;
      case 39://->
       if(getCursorPosition(elm)<elm.value.length)return;
       nCell++;
       if(nCell==objTR.cells.length){    
        nRow++;//跳转到下一行首位置
        nCell=1;//第一列
       }
       break;
      case 40://\|/
       nRow++;
       if(nRow==objTBODY.rows.length){    
        addRow(objTable);//增加一个空行
        nCell=1;//跳转到第一列
       }
       break;
      case 13://Enter
       nCell++;
       if(nCell==objTR.cells.length){    
        nRow++;//跳转到下一行首位置
        nCell=1;//第一列
       }
       if(nRow==objTBODY.rows.length){    
        addRow(objTable);//增加一个空行
        nCell=1;//跳转到第一列
       }   break;
      default://do nothing
       return;
     }
     if(nRow<2 || nRow>=objTBODY.rows.length || nCell<1 ||nCell>=objTR.cells.length) return; objTR=objTBODY.rows[nRow];
     objTD=objTR.cells[nCell];
     var objs=objTD.all;
     for(var i=0;i<objs.length;i++){
      //此处使用ojbs[0],实际使用时可能需要加以修改,或加入其他条件
      try{
       lightonRow(objTR);
       objs[i].focus();//setCursorPosition(objs[i],-1);
       return;
      }catch(e){
       continue;
       //if error occur,continue to next element
      }
     }//end for objs.length
    }
    //设置键盘状态,即bKeyDown的值
    function setKeyDown(status){
     bKeyDown=status;
    }
    //得到光标的位置
    function getCursorPosition(obj){
     var qswh="@#%#^&#*$"
     obj.focus();
     rng=document.selection.createRange();
     rng.text=qswh;
     var nPosition=obj.value.indexOf(qswh)
     rng.moveStart("character", -qswh.length)
     rng.text="";
     return nPosition;
    }
    //设置光标位置
    function setCursorPosition(obj,position){
     range=obj.createTextRange(); 
     range.collapse(true); 
     range.moveStart('character',position); 
     range.select();
    }
      

  4. 謝謝supreme,這個代碼我有,大家有沒有別的好的!謝謝!
      

类似问题 »