可改变宽度的表格

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > 可改变宽度的table </ title >
         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
         < meta  content ="C#"  name ="CODE_LANGUAGE" >
         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
          < SCRIPT >
             // 记录鼠标状态, 记录鼠标按下, 记录当前列
             var  curState, curDown, curCol;
             var  oldPlace, newPlace;

             function  getTable(item) {
             var  obj  =   null ;
             do  {
             if  (item.tagName == " TABLE " ) {
            obj  =  item;
             break ;
            }
            item  =  item.offsetParent;
            }
             while  (item  !=   null ); 
             return  obj;
            }

             function  calculateOffset(item, offsetName) {
             var  totalOffset  =   0 ;
             do  {
            totalOffset  +=  eval( ' item.offset '   +  offsetName);
            item  =  item.offsetParent;
            }
             while  (item  !=   null );
             return  totalOffset;
            }

             function  moveCol(objCol) {
            window.status  =  window.document.body.scrollLeft;
             if  ( ! curDown) {
             // curCol = objCol;
             // /鼠标没有按下
             if  (window.event.x  +  window.document.body.scrollLeft  >  calculateOffset(objCol,  " Left " )  +  objCol.offsetWidth  -   3
                 &&   window.event.x  +  window.document.body.scrollLeft   <  calculateOffset(objCol,  " Left " )  +  objCol.offsetWidth       )
             {
                 // 移动到了相应的部位/改变鼠标
                curState = true ;
                window.document.body.style.cursor  =   " w-resize " ;
            }
             else  
            {
                curState  =   false ;
                window.document.body.style.cursor  =   " default " ;    
            }
            curCol  =  objCol;
            }
            } 
             
             function   upBody() 
            {
              if  (curState)
             {
                     // 调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
                     // 并且左边不会占到整个的一半宽度
                    newPlace  =  window.event.x  +  window.document.body.scrollLeft;
                     if  (myDiv.offsetLeft  +  myLine.offsetLeft  >  calculateOffset(curCol,  " Left " )  +   20  
                           ) 
                    {
                         if  (curCol.width  >  oldPlace  -  newPlace)
                            curCol.width  -=  oldPlace  -  newPlace;
                         var  curTable  =  getTable(curCol);
                         //     if (curTable!=null)
                         // curTable.width -= oldPlace - newPlace;

                        window.document.all.tdright.style.width  =   750   -  curCol.width ;
     
                    }
                     // -------------------------------------------------------------
                    curState  =   false ;
                    curDown  =   false ;
                    myDiv.style.display  =   " none " ;
                    window.document.body.style.cursor  =   " default " ;
                }
            }
 
             function  downBody()
            {
                 // 鼠标按下
                 if  (curState)
                {
                    curDown  =   true ;
                     var  curTable  =  getTable(window.event.srcElement);
                     if  (curTable != null ) 
                    {
                         // ---------定位竖线----------
                        myDiv.style.display  =   "" ;  // 层可见
                        myLine.style.height  =  curTable.offsetHeight;
                        myLine.style.width  =   1 ;
                        myDiv.style.left  =  window.event.x  +  window.document.body.scrollLeft  -  myLine.offsetLeft;
                        myDiv.style.top  =  calculateOffset(curTable,  " Top " )  -  myLine.offsetTop;
                         // ---------------------------
                        oldPlace  =  window.event.x  +  window.document.body.scrollLeft;
                    }
                }
            } 
 
             function  moveBody() 
            {
                 // 鼠标移动
                 if  (curDown)
                {
                     // 鼠标按下状态
                    myDiv.style.left  =  window.event.x  +  window.document.body.scrollLeft  -  myLine.offsetLeft;
                    window.document.body.style.cursor  =   " w-resize " ;
                }
            }

             function  selectBody() {
             // 鼠标选择文本[不支持动态调整？]
             if  (curDown)  // 鼠标按下于调整状态
            window.event.returnValue  =   false ;
            }
            
         </ SCRIPT >
     
     </ HEAD >
     < body  onmouseup ="upBody()"  onselectstart ="selectBody()"  onmousedown ="downBody()"  onmouseover ="moveBody()"
        bottomMargin ="0"  leftMargin ="0"  topMargin ="0"  rightMargin ="0" >
         < DIV  id ="myDiv"  style ="DISPLAY: none; Z-INDEX: 1; LEFT: 12px; WIDTH: 0px; POSITION: absolute; TOP: 50px; HEIGHT: 100%" >
             < HR  id ="myLine"  width ="1"  color ="black"  noShade SIZE ="200" >
         </ DIV >
         < form  name ="Form1"  method ="post"  action ="FileShareBrowse.aspx?FileShareID=9b00cf00-ec2d-4aa5-a45a-0f1f3dcf1fb3"
            id ="Form1" >
             &nbsp;
             < TABLE  style ="FONT-SIZE: 9pt"  height ="100%"  cellSpacing ="0"  cellPadding ="0"  width ="100%"
                border ="0"  ID ="Table1" >
                 < tr >
                     < td >
                     < TD  vAlign ="top" >
                         < TABLE  style ="BORDER-RIGHT: #4f91b1 1px solid; BORDER-TOP: #4f91b1 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #4f91b1 1px solid; BORDER-BOTTOM: #4f91b1 1px solid"
                            height ="100%"  cellSpacing ="0"  cellPadding ="0"  width ="500"  border ="0"  ID ="Table10" >
                             <!-- Main -->
                              < tr >
                                              < td  onmousemove ="moveCol(this)"  id ="tdleft"  vAlign ="top"  width ="120"  height ="100%" >
                                                                 左
                                                             </ td >
                                                             < TD  id ="tdright"  vAlign ="top"  width ="590"  style =" BORDER-LEFT: #3d88ad 2px double"  height ="100%"  bgcolor ="yellow" >
                                                                 右
                                                             </ TD >
                                                         </ tr >
                             <!-- EndMain --> </ TABLE >
                     </ TD >
                 </ tr >
             </ TABLE >
         </ form >
     </ body >
</ HTML >