javascript 实现像excel那样 拽动选取多个cell

在整个操作区设置响应拖拽事件函数,当发生这个事件时,未放开此标时,每一次的移动都检查是否移动到新的方块,是,在此新方块上设置新id,否,不理会,放开此标后.结束事件处理.然后进行相关操作后,如在选定区域上点右键就弹出菜单给出可用的操作,当点左键时删除新赋id变成只选定当前方块.这样就可以通过id名来处理多选方块了.

解决方案 »

  1.   

    手上正好有个demohttp://china.ctrl1.com/demo/CoolTable.htm
      

  2.   

    http://china.ctrl1.com/demo/CoolTable.htm
      

  3.   

    。。楼主去看看 extjs里面的  grid DEMO 吧
      

  4.   


    <html>
    <head>
    <style type="text/css">
    td
    {
    text-align:center;
    vertical-align:center;
    height:30px;
    }
    </style>

    <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    };
    function initTableData()
    {
    $("table1").style.cursor="crosshair";
    var currentTdValue=1;
    var startRow=0;
    var startCell=0;
    for(var i=0;i < $("table1").rows.length;i++)
    {
    for(var j=0;j < $("table1").rows[i].cells.length;j++)
    {
    $("table1").rows[i].cells[j].innerText=currentTdValue;
    $("table1").rows[i].cells[j].onselectstart=function(){return false};
    $("table1").rows[i].cells[j].positionRow=i;
    $("table1").rows[i].cells[j].positionCell=j;
    $("table1").rows[i].cells[j].onmousemove=function(){selectMultiCell(event)};
    $("table1").rows[i].cells[j].onmousedown=function(){selectCell(event)};
    currentTdValue++;
    }
    } function selectMultiCell(e)
    {
    if(e.button==1)
    {
    clearSelectedArea($("table1"));
    var endRow=e.srcElement.positionRow;
    var endCell=e.srcElement.positionCell;
    for(var m=Math.min(startRow,endRow);m<=Math.max(startRow,endRow);m++)
    {
    for(var n=Math.min(startCell,endCell);n<=Math.max(startCell,endCell);n++)
    {
    $("table1").rows[m].cells[n].style.backgroundColor="#eeeeee";
    }
    }
    }
    }; function selectCell(e)
    {
    if(e.button==1)
    {
    startRow=e.srcElement.positionRow;
    startCell=e.srcElement.positionCell;
    clearSelectedArea($("table1"));
    e.srcElement.style.backgroundColor="#eeeeee";
    }
    }; function clearSelectedArea(oTable)
    {
    for(var i=0;i < oTable.rows.length;i++)
    {
    for(var j=0;j < oTable.rows[i].cells.length;j++)
    {
    oTable.rows[i].cells[j].style.backgroundColor="";
    }
    }
    } }; </script>
    </head>
    <body onload="initTableData()">
    <span id="s1"></span>
    <table border="1" width="100%" cellspacing="0" cellpadding="0" id="table1" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table> </body>
    </html>