打印

抛块砖，在TABLE中模仿excel的单元格移动

cjj [楼主]

阳光锈了

荣誉管理团队

帖子: 5598
体力: 9331
威望: 117
当前: 浙江嘉兴
离线: 5 天

专长 ASP

1^# 大中小发表于 2006-8-3 10:22

最近在做个大数据量的录入，为了方便客户输入，需要通过方向键来移动到输入框中，本代码仅供学习、研究，请勿用于其它用途:D

下面贴的代码只是贴出来TABLE中的移动效果，没有具体的录入界面。代码在OPERA9中和FF1中有问题（似乎onkeypress事件无效），但是放入INPUT等输入框之后可以正常使用。

测试方法：先点击某个单元格，然后通过方向键移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/**
Support：Opera7+
**/
    var CTable = new Object();
    //列数
    CTable.colCount=0;
    //行数
    CTable.rowCount=0;
    //Table Map
    CTable.Map = null;
    //前一单元格的行号，默认为-1
    CTable.prevRow = -1;
    //前一单元格的列号，默认为-1
    CTable.prevCol = -1;
    //当前行号，默认为-1
    CTable.curRow=-1;
    //当前列号，默认为-1
    CTable.curCol=-1;
    //待操作元素的Tag Name
    CTable.Element="TD";
    //载入table
    CTable.Load = function(a_sID,a_sTagName){
        var iRowCount=0, iColCount=0, i, j, m, n, iIndex=0, iCount;
        var oTable = document.getElementById(a_sID);
 
        //设置tble属性
        if (oTable!=null) {
            var tableMap = [];
            for (i=0 ; i < oTable.rows[0].cells.length ; ++i ) {
                iColCount += oTable.rows[0].cells[i].colSpan;
            }
            //获取总行数
            iRowCount = oTable.rows.length;
            //监听click事件
            oTable.getElementsByTagName('tbody')[0].onclick=CTable_setFocus;
            //监听keydown事件
            document.getElementsByTagName('body')[0].onkeydown=CTable_moveFocus;
            //列数
            CTable.colCount = iColCount;
            //行数
            CTable.rowCount = iRowCount;
//table map start
            //Init Table Map
            var aCols=null, oCell;
 
            for (i=0; i<iRowCount; ++i) {
                aCols = new Array(iColCount);
                tableMap.push(aCols);
            }
            for (i=0; i<iRowCount; ++i) {
                iIndex=0;
                for (j=0; j<iColCount; j+=oCell.colSpan) {
                    if (tableMap[i][j]==null) {
                        oCell = oTable.rows[i].cells[iIndex++];
                        for(m=i; m<i+oCell.rowSpan; ++m) {
                            for(n=j; n<j+oCell.colSpan; ++n) {
                                tableMap[m][n] = i+','+j;
                            }
                        }
                        tableMap[i][j] = oCell;
                    }
                }
            }
//table map结束
            CTable.Map = tableMap;
        }
 
    };//end CTable.Load
    //鼠标点击设置焦点  DOM:e.target
    function CTable_setFocus(event){
        var e = event || window.event;
        var obj = e.target || e.srcElement, oParent = obj.parentNode;
        var iCurRow = CTable.curRow, iCurCol = CTable.curCol;
        var oPrevNode = CTable.getNode(CTable.prevRow,CTable.prevCol);
        var iColCount = CTable.colCount;
        var aMaps = CTable.Map;
        if (oParent.tagName.toUpperCase() != "TR") {
            return;
        }
if (oPrevNode) {
    oPrevNode.bgColor="#FFFFF0";
}
 
        iCurRow = oParent.rowIndex;
        for (var i=0; i<iColCount; i++){
            if (aMaps[iCurRow][i]==obj) {
                iCurCol = i;
                break;
            }
        }
   
        //设置结点的位置
        CTable.curRow = iCurRow;
        CTable.curCol = iCurCol;
        if (CTable.prevRow ==-1 || CTable.prevCol==-1) {
            CTable.prevRow = iCurRow;
            CTable.prevCol = iCurCol;
        }
obj.bgColor ="#FF0000";
        obj.focus();
    }
    //移动焦点
    function CTable_moveFocus(event) {
        //获取当前结点
    	var e = event || window.event;
        var oNode = e.target || e.srcElement;
        var oNext = null;
        switch (e.keyCode) {
        case 37://2
            oNext = CTable_getNextNode(2);
            break;
        case 38://↑ 0
            oNext = CTable_getNextNode(0);
            break;
        case 13://回车
        case 39://→3
            oNext = CTable_getNextNode(3);
            break;
        case 40://↓1
            oNext = CTable_getNextNode(1);
            break;
        }//end switch
//改变背景色
if (oNext) {
    oNext.focus();
    oNext.bgColor="#336699";
}
    }//end moveFocus
    //获取指定行、列号的单元格
    CTable.getNode = function(a_iRow,a_iCol) {
        //如果行号或列号小于零，则返回null
        if (a_iRow<0 || a_iCol<0) {
            return null;
        }
        //初始化数据
        var oNode=null;
        var aMaps = CTable.Map, aTemps=null;
        var iRow = a_iRow, iCol=a_iCol;
        var sTemp="";
        //获取结点
        while(true) {
            oNode = aMaps[iRow][iCol];
            sTemp=typeof(oNode);
  
            if (sTemp.toLowerCase()=="string") {
                aTemps=oNode.split(",");
                iRow = aTemps[0];
                iCol = aTemps[1];
            } else {
                break;
            }
        }
        //函数返回值
        return oNode;
    };//end CTable.getNode
    //获取一下结点
    function CTable_getNextNode(a_iDirection) {
        var oNode = null;
        var iCol = CTable.curCol ,iRow=CTable.curRow;
        var iRowCount = CTable.rowCount, iColCount=CTable.colCount;
        var aMaps = CTable.Map, aTemps=null;
        var iCurCol=iCol, iCurRow = iRow, iTemp;
        var sTemp="", sStr="";
  
        oNode = aMaps[iRow][iCol];
        if (typeof(oNode)=="string") {
            aTemps = oNode.split(",");
            iCurRow = aTemps[0];
            iCurCol = aTemps[1];
        }
        while (true) {
            switch(a_iDirection) {
            case 0:
                iRow--;
                break;
            case 1:
                iRow++;
                break;
            case 2:
                iCol--;
                if (iCol<0) {
                    iCol = iColCount-1;
                    iRow--;
                }
                 break;
            case 3:
                iCol++;
                if (iCol>=iColCount) {
                    iRow++;
                    iCol=0;
                }
                break;
            }
            if (iRow<0) {iRow=iRowCount-1;}
            if (iRow>=iRowCount) {iRow=0;}
            if ((iCurRow == iRow) && (iCurCol == iCol)) {
                continue;
            }
            oNext = aMaps[iRow][iCol];
            sTemp=typeof(oNext);
            if (sTemp.toLowerCase()=="string") {
                aTemps=oNext.split(",");
                if ((iCurRow!=aTemps[0]) || (iCurCol!=aTemps[1])) {
                    oNext = CTable.getNode(iRow,iCol);                   
                    break;
                }
                continue;
            }
  
            break;
        }; //end CTable.getNextNode
        switch(a_iDirection) {
        case 0://上
        case 1://下
            if (oNext.colSpan>1) {
                iTemp = CTable.curCol;
                CTable.prevCol = iTemp;
                CTable.prevRow = CTable.curRow;
                CTable.curRow = iRow;
            } else {
                CTable.prevCol = CTable.curCol;
                CTable.prevRow = CTable.curRow;
                CTable.curCol = iCol;
                CTable.curRow = iRow;
            }
            break;
        case 2://左
        case 3://右
            if (oNext.rowSpan>1) {
                CTable.prevCol = CTable.curCol;
                CTable.curCol = iCol;
                iTemp = CTable.curRow;
                CTable.curRow = iRow;
                CTable.prevRow = iTemp;
            } else {
                CTable.prevCol = CTable.curCol;
                CTable.prevRow = CTable.curRow;
                CTable.curCol = iCol;
                CTable.curRow = iRow;
            }
            break;
        }
        var oPrev = CTable.getNode(CTable.prevRow,CTable.prevCol);
if (oPrev) {
    oPrev.bgColor="#FFFFFF";
}
        return oNext;
    }
    //窗体载入函数
    window.onload=function() {CTable.Load("tblTest","TD");};
</script> 
<table width="600" border="1" id="tblTest" name="tblTest">
  <tr>
    <td>0,0</td>
    <td>0,1</td>
    <td>0,2</td>
    <td>0,3</td>
    <td>0,4</td>
    <td>0,5</td>
    <td>0,6</td>
    <td>0,7</td>
    <td>0,8</td>
    <td>0,9</td>
  </tr>
  <tr>
    <td>1,0</td>
    <td rowspan="3">1,1</td>
    <td rowspan="2">1,2</td>
    <td>1,3</td>
    <td>1,4</td>
    <td>1,5</td>
    <td>1,6</td>
    <td colspan="2" rowspan="3">1,7</td>
    <td>1,8</td>
  </tr>
  <tr>
    <td height="26">2,0</td>
    <td>2,1</td>
    <td>2,2</td>
    <td colspan="2" rowspan="2">2,3</td>
    <td>2,4</td>
  </tr>
  <tr>
    <td>3,0</td>
    <td>3,1</td>
    <td>3,2</td>
    <td>3,3</td>
    <td>3,4</td>
  </tr>
  <tr>
    <td>4,0</td>
    <td>4,1</td>
    <td colspan="5">4,2</td>
    <td>4,3</td>
    <td>4,4</td>
    <td>4,5</td>
  </tr>
  <tr>
    <td colspan="3">5,0</td>
    <td>5,1</td>
    <td colspan="2" rowspan="2">5,2</td>
    <td>5,3</td>
    <td>5,4</td>
    <td>5,5</td>
    <td>5,6</td>
  </tr>
  <tr>
    <td colspan="2">6,0</td>
    <td colspan="2">6,1</td>
    <td rowspan="2">6,2</td>
    <td>6,3</td>
    <td rowspan="3">6,4</td>
    <td>6,5</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">7,0</td>
    <td>7,1</td>
    <td colspan="2">7,2</td>
    <td>7,3</td>
    <td rowspan="2">7,4</td>
    <td>7,5</td>
  </tr>
  <tr>
    <td>8,0</td>
    <td>8,1</td>
    <td>8,2</td>
    <td>8,3</td>
    <td>8,4</td>
    <td>8,5</td>
  </tr>
  <tr>
    <td>9,0</td>
    <td>9,1</td>
    <td>9,2</td>
    <td>9,3</td>
    <td>9,4</td>
    <td>9,5</td>
    <td>9,6</td>
    <td>9,7</td>
    <td>9,8</td>
    <td>9,9</td>
  </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 cjj 于 2006-8-3 13:39 编辑 ]

本帖最近评分记录

bound0 威望 +3 原创内容 2006-8-3 12:39

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

bound0

老饕

版主

帖子: 3391
体力: 8414
威望: 273
当前: 北京海淀区
离线: 1 天

专长 JS,Perl,产品设计

2^# 大中小发表于 2006-8-3 12:38

报告一个小bug

点住单元格，然后拖拽鼠标，就会报错。

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

美橙vps独立IP月付189元

cjj [楼主]

阳光锈了

荣誉管理团队

帖子: 5598
体力: 9331
威望: 117
当前: 浙江嘉兴
离线: 5 天

专长 ASP

3^# 大中小发表于 2006-8-3 13:40

bug改了一下。

但这段代码为什么不能在FF中执行啊？

TOP

中央美院远程平面设计进修班

zsy3721

初级会员

帖子: 32
体力: 106
威望: 0
离线: 581 天

4^# 大中小发表于 2006-8-3 14:57

将document.getElementsByTagName('body')[0].onkeydown=CTable_moveFocus;
改为document.onkeydown=CTable_moveFocus;就可以执行了

人是会变的

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

iwege

高级会员

帖子: 357
体力: 283
威望: 3
当前: 湖南湘潭
离线: 1 天

专长 网管,编辑,推广

5^# 大中小发表于 2006-8-22 07:41

我在多点几下之后为什么会出现多个橙色的选取框? 点击7.2的时候再点击5.2,7.2的表格颜色会变成淡色..

如果我在已经出现的蓝色的情况下为什么还能出现多个蓝色啊?

而且在已经有一个表格变成蓝色的情况下点击另外的表格.蓝色的表格周围会出现一个表格为淡色是怎么回事啊....

午后,侍茶于旁,古书留香.

TOP

HotHeart

徐徐

银牌会员

帖子: 1231
体力: 2532
威望: 24
离线: 2 天

专长 JS,ASP,.NET

6^# 大中小发表于 2006-8-22 07:52

呃……这个单元格是不是多选的，我怎么在FF里面把全部的单元格都点成了红色啊……
在FF里面方向键也没有用

Simple,Natural,Actual
HotHear's BLOG

TOP

bmcsy

中级会员

帖子: 95
体力: 204
威望: 0
当前: 广东佛山
离线: 42 天

7^# 大中小发表于 2007-1-27 12:45

再完善下,通杀所有浏览器那就更强了.

活着为了什么？

TOP

isunten

中级会员

帖子: 164
体力: 355
威望: 0
离线: 283 天

8^# 大中小发表于 2007-11-21 00:28

楼主为什么不持续完善这段代码了呢？
我拿回去研究咯。

who am i... i do i like...

TOP

ljybbs

中级会员

帖子: 122
体力: 280
威望: 0
当前: 广东广州
离线: 2 天

专长 ASP

9^# 大中小发表于 2007-11-21 11:20

我在ie7下测试没有任何反应

我在ie7下测试没有任何反应,只是点击时,表格变红,但就拖动不了~

TOP

mylover002

新手上路

帖子: 13
体力: 26
威望: 0
离线: 4 天

10^# 大中小发表于 2007-11-27 13:35

在IE6.0下沒有反應呀,點擊變紅色了,不能動

TOP

lomo

盗版量子

初级会员

帖子: 349
体力: 133
威望: 0
当前: 北京海淀区

11^# 大中小发表于 2007-12-4 16:15

lomo

嵌入了input输入框后，如何实现“Enter”键自动移动到下一个表格的输入框呢，好像只能使用Tab键来移动

TOP

cjj [楼主]

阳光锈了

荣誉管理团队

帖子: 5598
体力: 9331
威望: 117
当前: 浙江嘉兴
离线: 5 天

专长 ASP

12^# 大中小发表于 2008-2-18 10:54

1.这个程序还不够完善只在IE6 Opera9 FF2下测试通过
2.不支持拖动
3.点击变红只是为了确一个移动的起始位置
4.点击选择一个单元格后按上、下、左、右改变当前位置

TOP