跪求（急）：表头拖动 改变列宽度的表格组件 与firefox兼容

跪求：表头拖动 改变列宽度的表格组件 与firefox兼容， 知道http://webfx.eae.net/ 上有， 但是好像打不开，有哪位朋友，自己有这样的组件源码，发我一份。  发我邮箱：[email protected]
msn:[email protected]

解决方案 »

  1.   


    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
      <HTML>   
      <HEAD>   
      <TITLE>   New   Document   </TITLE>   
      <style>   
      .tabletitle   {   
      font:   icon;   
      color:   buttontext;   
      background:   threedhighlight;   
      border-top:1px   solid   #000000;   
      border-right:   1px   solid   #000000;   
      border-left-style:   solid;   
      border-bottom-style:   none;   
      border-left-width:   1px;   
      border-left-color:   #000000;   
      }   
      .tabletitleTD   {   
      background:   #0099FF;   
      overflow:hidden;   
      height:15;   
      border-left:1px   solid   buttonhighlight;   
      border-right:1px   solid   buttonshadow;   
      border-top:1px   solid   buttonhighlight;   
      border-bottom:1px   solid   buttonshadow;   
      color:   #FFFFFF;   
      }   
      .tableAct   {   
      background:   #FFFFFF;   
      font:   icon;   
      color:   buttontext;   
      border-right:   1px   solid   threedshadow;   
      }   
      .tableAct   TD{   
      border-left:   1px   solid   buttonshadow;   
      }   
      .tdwbar{   
      cursor:w-resize;   
      background:buttonface;   
      behavior:url(dragline.htc);   
      }   
      .tt   {   
      background-color:   #FFFFFF;   
      border-top:   1px   none   #666666;   
      border-right:   1px   none   #666666;   
      border-bottom:   1px   solid   #666666;   
      border-left:   1px   none   #666666;   
      white-space:   nowrap;   
      }   
      .myscroll{FONT-SIZE:   12px;SCROLLBAR-HIGHLIGHT-COLOR:   #FFFFFF;SCROLLBAR-SHADOW-COLOR:   #e1e1e1;SCROLLBAR-3DLIGHT-COLOR:   #e1e1e1;SCROLLBAR-TRACK-COLOR:   white;   SCROLLBAR-DARKSHADOW-COLOR:   white; scrollbar-Base-Color:   white;   scrollbar-arrow-Color:}   
      </style>   
      <SCRIPT   LANGUAGE="JavaScript">   
      <!--   
      function   TTable(name){   
              this.name=name;   
      this.cols=new   Array();   
      this.rows=new   Array();   
      this.items=new   Array();   
      this.colcount=0;//实际是列输减一   
      this.rowcount=0;   
      this.data=new   Array();   
      //style   
      this.width=100;//colum   width   
      this.bgc="#e7e7e7";   
      this.fontfamily="tahoma,arial,helvetica";   
              //method   
      this.addData=addData;   
      this.trimData=trimData;   
      this.create=create;   
      this.display=display;   
      this.refresh=refresh;   
      }   
      function   TItem(owner,name,data,rindex,cindex,width,bgc,ftc){   
              this.owner=owner;   
      this.name=name;   
      this.data=data;   
      this.rindex=rindex;   
      this.cindex=cindex;   
      this.width=width||owner.width;   
      this.bgc=bgc||owner.bgc;   
      this.htmlcode=!rindex?'\n<TD   width="100"   class="tabletitleTD"   >'+data+'</TD>\n<TD   width="2"   rowspan="'+owner.colcount+'"   class="tdwbar"   ></TD>':'\n<TD   class="tt">'+data+'</TD>';   
      }   
        
      function   addData(){   
              var   arg=addData.arguments;   
              var   len=arg.length;   
      this.colcount=Math.max(this.colcount,len);   
              var   tmpdata=new   Array();   
      for(i=0;i<this.colcount;i++){   
              tmpdata[i]=!arg[i]?'':arg[i];   
      }   
      this.data[this.data.length]=tmpdata;   
      }   
      function   trimData(){   
              for(i=0;i<this.data.length;i++){   
              for(j=0;j<this.colcount;j++){   
              this.data[i][j]=!this.data[i][j]?'&nbsp;':this.data[i][j];   
      }   
      }   
      }   
      function   create(){   
              for(i=0;i<this.data.length;i++){   
              this.items[i]=new   Array;   
      for(j=0;j<this.colcount;j++){   
              this.items[i][j]=new   TItem(this,this.data[i][j],this.data[i][j],i,j)   
      }   
              }   
      }   
      function   display(){   
              this.htmlcode='';   
      this.htmlcode+='\n<div   id="MainBG"   style="position:absolute;   left:100px;   top:180px;   z-index:1;   ;border:   1px   none   #000000;overflow:auto;"   class=myscroll>'   
                                                +'\n<div   id="TableBG"   style="position:absolute;   left:0px;   top:0px;   z-index:2;   border:   1px   none   #000000">'   
        +'\n<TABLE     border="0"   cellPadding="0"   cellSpacing="0"     class="tabletitle"   id="tb1">';   
        
      for(i=0;i<this.data.length;i++){   
              this.htmlcode+='\n<tr>';   
              for(j=0;j<this.colcount;j++){   
            this.htmlcode+=this.items[i][j].htmlcode;   
      }   
      this.htmlcode+='\n</tr>';   
              }   
      this.htmlcode+='</table></div></div>';   
      // alert(this.htmlcode)   
      document.write(this.htmlcode)   
      }   
      /*******************     drag   function     ************************/   
      function   TDrag(){   
            this.x1=null;   
            this.x2=null;   
            this.obj=null;   
            this.tableW=null;   
            this.tdW=null;   
            this.table=null;   
            this.targetTD=null;   
      }   
      function   getTdSid(sid){   
            var   targetSID=sid-1;   
            while(document.all[targetSID].tagName!='TD'){targetSID--}   
            return   targetSID   
      }   
      function   mDown(){   
              oDrag.obj=window.event.srcElement;   
              if(oDrag.obj.tagName=='TD'&&oDrag.obj.rowSpan!=1){   
                document.body.style.cursor="e-resize";   
              var   targetSID=getTdSid(event.srcElement.sourceIndex);   
                      oDrag.targetTD=document.all[targetSID];   
      oDrag.table=event.srcElement.parentElement.parentElement.parentElement;   
              oDrag.tableW=table.clientWidth;   
              oDrag.x1=event.x   
      }else{   
              oDrag.obj=null;   
              return   false   
      }   
      }   
      function   mMove(){   
            if(!oDrag.obj)return   false;   
            try{   
            if(window.event.x>=(MainBG.offsetLeft+MainBG.clientWidth))return   false;   
      oDrag.x2=event.x;   
      var   dW=oDrag.x2-oDrag.x1;   
      oDrag.targetTD.style.width=oDrag.targetTD.clientWidth+dW   
      oDrag.table.style.width=dW+oDrag.tableW;//------------>!!!   
      }   
      catch(x){}   
      }   
      function   mUp(){   
          document.body.style.cursor="default";   
          oDrag.obj=null;   
      }   
      function   refresh(){   
            table=TableBG.children[0]   
            TableBG.style.width=table.clientWidth;   
            TableBG.style.height=table.clientHeight;   
            MainBG.style.width=(TableBG.clientHright>=500)?500:TableBG.clientWidth;   
            MainBG.style.height=(TableBG.clientHright>=500)?500:TableBG.clientHeight+16;//默认,高度超过500px使用滚动   
      }   
      function   dragInit(){   
                    oDrag=new   TDrag();   
            document.onmousedown   =   mDown   
            document.onmousemove   =   mMove   
            document.onmouseup   =   mUp;   
      }   
      //-->   
      </SCRIPT>   
      </HEAD>   
        
      <BODY   onload="dragInit()">   
        
      <SCRIPT   LANGUAGE="JavaScript">   
      <!--   
      ot=new   TTable();   
      ot.addData('name','email','phoneCode','address','homepage','oicq')   
      ot.addData('llrock','[email protected]','123456789','Beijing','user1.7host.com/ccrock','1234567')   
      ot.addData(1,2,3,4)   
      ot.addData(1,2,'',4,5,6)   
      ot.addData(1,2,3,4,5)   
      //ot.data=[[1,2,3,4],2,3]   
      ot.trimData()   
      ot.create()   
      ot.display()   
      ot.refresh()   
      //-->   
      </SCRIPT>   
      </BODY>   
      </HTML>   
      

  2.   

    非常感谢这位仁兄啊， 但是有一点，  你发的这个在ie下 很好， 在 firefox下跑不出来
      

  3.   

    哎， 刚刚自己找到了，也跟大家共享下。
    这个分数看来要自己 拿啦
    http://www.jb51.net/article/9254.htm
      

  4.   

    VSFlexGrid
    http://www.viewslip.com/cn/tools_view_06172.html