能拖动行和列的Table

  1. <html>  
  2. <head>  
  3. <style>     
  4. .resizeDivClass     
  5. {     
  6.     position:relative;     
  7.     width:4;     
  8.     z-index:1;     
  9.     left:expression(this.parentElement.offsetWidth - 3);     
  10.     cursor:e-resize;   
  11.        
  12. }     
  13.   
  14. .resizeDivClass2   
  15. {   
  16.     position:relative;   
  17.        
  18.     width:expression(this.parentElement.offsetWidth);   
  19.     height:1px;   
  20.     border: solid 0px;   
  21.        
  22.     z-index:1;   
  23.     top:expression(this.parentElement.offsetHeight - 5);   
  24.     cursor:n-resize;    
  25. }    
  26. </style>     
  27.      
  28. <script language=javascript>     
  29.      
  30.  function MouseDownToResize(obj)   
  31.  {     
  32.     obj.mouseDownX=event.clientX;     
  33.     objobj.pareneTdW=obj.parentElement.offsetWidth;     
  34.     obj.pareneTableW=theObjTable.offsetWidth;     
  35.     obj.setCapture();     
  36.  }     
  37.     
  38.  function MouseMoveToResize(obj)   
  39.  {     
  40.   if(!obj.mouseDownX)   
  41.   {   
  42.     return false;     
  43.   }   
  44.   var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;     
  45.   if(newWidth>0)     
  46.   {     
  47.     obj.parentElement.style.width = newWidth;     
  48.     theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;     
  49.     }     
  50.  }     
  51.  function MouseUpToResize(obj)   
  52.  {     
  53.     obj.releaseCapture();     
  54.     obj.mouseDownX=0;     
  55.  }     
  56.     
  57.  function MouseDownToResize2(obj)   
  58.  {     
  59.     obj.mouseDownY = event.clientY;     
  60.     objobj.pareneTrH = obj.parentElement.offsetHeight;     
  61.     obj.pareneTableH=theObjTable.offsetHeight;     
  62.     obj.setCapture();     
  63.  }     
  64.     
  65.  function MouseMoveToResize2(obj)   
  66.  {     
  67.     if(!obj.mouseDownY)   
  68.     {   
  69.         return false;     
  70.     }   
  71.     var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;     
  72.      
  73.     if(newWidth > 0)     
  74.     {     
  75.         obj.parentElement.style.height = newWidth;     
  76.         theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;     
  77.     }     
  78.  }     
  79.   
  80.  function MouseUpToResize2(obj)   
  81.  {     
  82.     obj.releaseCapture();     
  83.     obj.mouseDownY=0;     
  84.  }     
  85.     
  86.  </script>     
  87.  </head>     
  88.       
  89.  <body>     
  90.       
  91.  改变table的列宽度     
  92.  <table id=theObjTable STYLE="table-layout:fixed" border="1" >     
  93.      <tr bgcolor=cccccc >     
  94.          <td valign=top >     
  95.             <div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>  
  96.             aaa   
  97.          </td>     
  98.         <td valign=top >     
  99.             <div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd   
  100.         </td>     
  101.         <td valign=top >     
  102.             <div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd   
  103.         </td>     
  104.      </tr>     
  105.           
  106.      <tr>     
  107.         <td valign=top >  
  108.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  109.             快乐不是因为拥有的多，而是计较的少。   
  110.         </td>  
  111.         <td valign=top >  
  112.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  113.             bbbb   
  114.         </td>  
  115.         <td valign=top >  
  116.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  117.             dddd   
  118.         </td>     
  119.      </tr>     
  120.      <tr>     
  121.         <td valign=top >  
  122.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。   
  123.         </td>  
  124.         <td valign=top >  
  125.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>       
  126.             bbbb   
  127.         </td>  
  128.         <td valign=top >  
  129.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  130.             dddd   
  131.         </td>  
  132.      </tr>    
  133.      <tr>     
  134.         <td valign=top >  
  135.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。   
  136.         </td>  
  137.         <td valign=top >  
  138.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  139.             bbbb   
  140.         </td>  
  141.         <td valign=top >  
  142.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  143.             dddd   
  144.         </td>     
  145.      </tr>    
  146.      <tr>     
  147.         <td valign=top >  
  148.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。   
  149.         </td>  
  150.         <td valign=top >  
  151.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  152.             bbbb   
  153.         </td>  
  154.         <td valign=top >  
  155.             <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>  
  156.             dddd   
  157.         </td>     
  158.      </tr>    
  159.  </table>     
  160.  </body>     
  161.       
  162.  </html>  

posted on 2010-07-21 16:19  xufeng001  阅读(401)  评论(0)  编辑  收藏  举报

导航