Javascript仿Excel的选择效果

 

<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>
posted @   随机  阅读(1058)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示
AI IDE Trae