用Table简单实现Grid中的拖动效果

 网上有很多网友提供此功能，但是大部分都是封装到类里的，一些刚入门或对JS不甚了解的朋友就只能引用别人的东西，想改一下又怕出错，现在提供一个超简单的示例：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >
< style > ...
table
{...}{
    background-color:#808080;
    font-size:12px; line-height:20px;
    table-layout:fixed;
}
td
{...}{
    background-color:#fff;
}
.tit
{...}{
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    background-color:#d6d3ce;
    text-align:center;
    clear:both;
}
.mover
{...}{
    float:right;
    overflow:hidden;
    width:5px; height:100%;
    cursor:col-resize;
}
.lable
{...}{
    float:left;
    margin-left:2px;
}
</ style >
< script  language ="javascript" > ...
    function gridMousedown(obj,e) ...{
        var defaultWidth = obj.offsetWidth;
        var defaultLeft = e.clientX;
        var handleObj = obj;
        if (!obj.initWidth) obj.initWidth = obj.offsetWidth;
        document.onmousemove = function ()
        ...{
            var initWidth = handleObj.initWidth;
            var newWidth = defaultWidth + (e.clientX-defaultLeft);
            newWidth = newWidth<initWidth?initWidth:newWidth;
            handleObj.width = newWidth;
        };
        document.onmouseup = function ()
        ...{
            document.onselectstart = document.onmousemove = document.onmouseup = null;
        };
        document.onselectstart = function ()
        ...{
            return false;
        };
    }
</ script >
</ HEAD >

< BODY >

< table  cellspacing ="1"  cellpadding ="0"  border ="0" >
     < tr >
         < td  width ="50"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题1 </ div >             
         </ td >
         < td  width ="50"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题2 </ div >             
         </ td >
         < td  width ="90"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题3 </ div >             
         </ td >
         < td  width ="50"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题4 </ div >             
         </ td >
         < td  width ="50"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题5 </ div >             
         </ td >
         < td  width ="80"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题6 </ div >             
         </ td >
         < td  width ="50"  class ="tit" >                 
             < div  class ="mover"  onmousedown ="gridMousedown(this.parentNode, event)" ></ div >                 
             < div  class ="lable" > 标题7 </ div >
         </ td >
     </ tr >
     < tr >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td >< td > aaa </ td ></ tr >
     < tr >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td >< td > bbb </ td ></ tr >
     < tr >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td >< td > ccc </ td ></ tr >
     < tr >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td >< td > ddd </ td ></ tr >
</ table >

</ BODY >
</ HTML >