箎潮汕话怎么读:javascript实现Table行和列的拖动

来源：百度文库 编辑：中财网 时间：2024/04/29 02:59:13

Table表格拖动， 既可以拖动行，也可以拖动列。代码如下：

 

Html代码
  1.   
  2.   
  3.      
  4.      
  5.  language=javascript>     
  6.      
  7.  function MouseDownToResize(obj)   
  8.  {     
  9.     obj.mouseDownX=event.clientX;     
  10.     objobj.pareneTdW=obj.parentElement.offsetWidth;     
  11.     obj.pareneTableW=theObjTable.offsetWidth;     
  12.     obj.setCapture();     
  13.  }     
  14.     
  15.  function MouseMoveToResize(obj)   
  16.  {     
  17.   if(!obj.mouseDownX)   
  18.   {   
  19.     return false;     
  20.   }   
  21.   var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;     
  22.   if(newWidth>0)     
  23.   {     
  24.     obj.parentElement.style.width = newWidth;     
  25.     theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;     
  26.     }     
  27.  }     
  28.  function MouseUpToResize(obj)   
  29.  {     
  30.     obj.releaseCapture();     
  31.     obj.mouseDownX=0;     
  32.  }     
  33.     
  34.  function MouseDownToResize2(obj)   
  35.  {     
  36.     obj.mouseDownY = event.clientY;     
  37.     obj.pareneTrH = obj.parentElement.offsetHeight;     
  38.     obj.pareneTableH=theObjTable.offsetHeight;     
  39.     obj.setCapture();     
  40.  }     
  41.     
  42.  function MouseMoveToResize2(obj)   
  43.  {     
  44.     if(!obj.mouseDownY)   
  45.     {   
  46.         return false;     
  47.     }   
  48.     var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;     
  49.      
  50.     if(newWidth > 0)     
  51.     {     
  52.         obj.parentElement.style.height = newWidth;     
  53.         theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;     
  54.     }     
  55.  }     
  56.   
  57.  function MouseUpToResize2(obj)   
  58.  {     
  59.     obj.releaseCapture();     
  60.     obj.mouseDownY=0;     
  61.  }     
  62.     
  63.       
  64.       
  65.       
  66.       
  67.       
  68.  改变table的列宽度     
  69.   id=theObjTable STYLE="" border="1" >     
  70.       bgcolor=cccccc >     
  71.           valign=top >     
  72.              class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);">
  
  •             aaa   
  •               
  •          valign=top >     
  •              class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);">
    • ddd   
  •              
  •          valign=top >     
  •              class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);">
    • ddd   
  •              
  •           
  •           
  •           
  •          valign=top >  
  •              class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);">
    •   
  •             快乐不是因为拥有的多，而是计较的少。   
  •           
  •          valign=top >  
  •              class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);">