• 2010-06-23

    js版简易excel(兼容ie&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/66914928.html

    写了个web版的excel,实现一些基本功能,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>like excel</title>
    <style>
    ul{clear:both;}
    li{height:20px;width:50px;border-left:1px solid gray;border-top:1px solid gray;list-style:none;float:left;overflow:hidden}
    </style>
    </head>
    <body>
    <ul style="width:880px">
    <script>
    x1=x2=y1=y2=0;
    moveit=false;
    letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    lastobj=null;
    lastj=null;
    lastcol=null;
    lastrow=null;
    beginobj=null;
    beginj=null;
    begini=null;
    endobj=null;
    endj=null;
    endi=null;
    change=null;
    lastsel=new Array();
    isIE = document.all && window.external;
    function myreset()
    {
    if(lastobj!=null)
    {
    try
    {
    if(lastobj.childNodes[0].innerHTML)
    lastobj.innerHTML=lastobj.childNodes[0].innerHTML;
    else if(lastobj.childNodes[0].tagName=='DIV')
    lastobj.innerHTML="";
    }
    catch(e)
    {
    }
    }
    for(i=2;i<document.getElementsByTagName_r("ul").length;i++)
    document.getElementsByTagName_r("ul")[i].childNodes[0].style.background='#EFEBDE';
    for(i=1;i<obj.parentNode.childNodes.length;i++)
    document.getElementsByTagName_r("ul")[1].childNodes[i].style.background='#EFEBDE';
    if(lastcol!=null)
    {
    document.getElementsByTagName_r("ul")[1].childNodes[lastcol+1].style.background='#EFEBDE';
    document.getElementsByTagName_r("ul")[1].childNodes[lastcol+1].style.color='';
    for(i=2;i<document.getElementsByTagName_r("ul").length;i++)
    document.getElementsByTagName_r("ul")[i].childNodes[lastcol+1].style.background='';
    }
    if(lastrow!=null)
    {
    lastrow.parentNode.childNodes[0].style.background='#EFEBDE';
    lastrow.parentNode.childNodes[0].style.color='';
    for(i=1;i<lastrow.parentNode.childNodes.length;i++)
    lastrow.parentNode.childNodes[i].style.background='';
    }
    }
    function mysel(obj,j)
    {
    resetbg();
    myreset();
    obj.innerHTML="<div style='border:2px solid black;height:"+(obj.offsetHeight-5)+"px;overflow:hidden'>"+obj.innerHTML+"</div>";
    obj.childNodes[0].contentEditable=true;
    obj.parentNode.childNodes[0].style.background='orange';
    document.getElementsByTagName_r("ul")[1].childNodes[j+1].style.background='orange';
    lastobj=obj;
    lastj=j;
    }
    function selcol(j)
    {
    resetbg();
    myreset();
    document.getElementsByTagName_r("ul")[1].childNodes[j+1].style.background='blue';
    document.getElementsByTagName_r("ul")[1].childNodes[j+1].style.color='white';
    for(i=2;i<document.getElementsByTagName_r("ul").length;i++)
    {
    document.getElementsByTagName_r("ul")[i].childNodes[j+1].style.background='lightblue';
    document.getElementsByTagName_r("ul")[i].childNodes[0].style.background='orange';
    }
    lastcol=j;
    }
    function selrow(obj)
    {
    resetbg();
    myreset();
    obj.parentNode.childNodes[0].style.background='blue';
    obj.parentNode.childNodes[0].style.color='white';
    for(i=1;i<obj.parentNode.childNodes.length;i++)
    {
    obj.parentNode.childNodes[i].style.background='lightblue';
    document.getElementsByTagName_r("ul")[1].childNodes[i].style.background='orange';
    }
    lastrow=obj;
    }
    function resetbg()
    {
    for(i=0;i<lastsel.length;i++)
    lastsel[i].style.background='';
    lastsel.length=0;
    }
    function mydown(obj,i,j)
    {
    moveit=true;
    beginobj=obj;
    begini=i;
    beginj=j;
    }
    function myup(obj,i,j)
    {
    moveit=false;
    endobj=obj;
    endi=i;
    endj=j;
    }
    function mymove(e)
    {
    if(!e)e=event;
    obj=e.srcElement?e.srcElement:e.target;
    if(e.clientX<x1||e.clientX>x2||e.clientY<y1||e.clientY>y2)
    moveit=false;
    if(moveit)
    {
    resetbg();
    myreset();
    try{
    endi=obj.id.split("li")[1].split("_")[0];
    endj=obj.id.split("li")[1].split("_")[1];
    if(beginj+1>endj-1)
    {j1=parseInt(endj)-1;j2=parseInt(beginj)+1;}
    else
    {j2=endj;j1=beginj;}
    if(begini+1>endi-1)
    {i1=parseInt(endi)-1;i2=parseInt(begini)+1;}
    else
    {i2=endi;i1=begini;}
    for(m=j1;m<j2;m++)
    for(n=i1;n<i2;n++)
    {
    document.getElementsByTagName_r("ul")[n+2].childNodes[m+1].style.background='lightblue';
    lastsel.push(document.getElementsByTagName_r("ul")[n+2].childNodes[m+1]);
    }
    for(i=i1;i<i2;i++)
    document.getElementsByTagName_r("ul")[i+2].childNodes[0].style.background='orange';
    for(i=j1;i<j2;i++)
    document.getElementsByTagName_r("ul")[1].childNodes[i+1].style.background='orange';
    }
    catch(e){}
    }
    }
    function mymake()
    {
     document.write("<ul onmouseover="this.style.cursor='pointer'"><li style='width:20px;background:#EFEBDE'>&nbsp;</li>");
     for(j=0;j<15;j++)
      document.write("<li onclick=selcol("+j+") style='background:#EFEBDE;text-align:center'>"+letters.substring(j,j+1)+"</li>");
     document.write("<li onclick=selcol("+j+") style='border-right:1px solid gray;background:#EFEBDE;text-align:center'>"+letters.substring(j,j+1)+"</li></ul>");
     for(i=0;i<29;i++)
     {
      document.write("<ul onmouseover="this.style.cursor='pointer'"><li style='width:20px;background:#EFEBDE;text-align:center' onclick=selrow(this)>"+(i+1)+"</li>");
      for(j=0;j<15;j++)
       document.write("<li id='li"+(i+1)+"_"+(j+1)+"' onclick='mysel(this,"+j+")' onmousedown='mydown(this,"+i+","+j+")' onmouseup='myup(this,"+i+","+j+")'></li>");
      document.write("<li id='li"+(i+1)+"_"+(j+1)+"' onclick='mysel(this,"+j+")' onmousedown='mydown(this,"+i+","+j+")' onmouseup='myup(this,"+i+","+j+")' style='border-right:1px solid gray'></li></ul>");
     }
     document.write("<ul onmouseover="this.style.cursor='pointer'"><li style='width:20px;border-bottom:1px solid gray;background:#EFEBDE;text-align:center' onclick=selrow(this)>"+(i+1)+"</li>");
     for(j=0;j<15;j++)
      document.write("<li id='li"+(i+1)+"_"+(j+1)+"' onclick='mysel(this,"+j+")' onmousedown='mydown(this,"+i+","+j+")' onmouseup='myup(this,"+i+","+j+")' style='border-bottom:1px solid gray'></li>");
     document.write("<li id='li"+(i+1)+"_"+(j+1)+"' onclick='mysel(this,"+j+")' onmousedown='mydown(this,"+i+","+j+")' onmouseup='myup(this,"+i+","+j+")' style='border-right:1px solid gray;border-bottom:1px solid gray'></li></ul>");
     topNode=document.getElementsByTagName_r("ul")[2].childNodes[1];
     bottomNode=document.getElementsByTagName_r("ul")[document.getElementsByTagName_r("ul").length-1].childNodes[document.getElementsByTagName_r("ul")[document.getElementsByTagName_r("ul").length-1].childNodes.length-1];
     if(isIE)
     {
      t=18;l=11;h=16;w=50;
     }
     else
     {
      t=0;l=0;h=0;w=0;
     }
     y1=topNode.offsetTop+t;
     x1=topNode.offsetLeft+l;
     y2=bottomNode.offsetTop+bottomNode.offsetHeight+h;
     x2=bottomNode.offsetLeft+bottomNode.offsetWidth+w;
    }
    mymake();
    document.onmousemove=mymove;
    </script>
    </ul>
    </body>
    </html>

    分享到: