javascript实现Table行和列的拖动-优快云博客

Table表格拖动，既可以拖动行，也可以拖动列。代码如下：
<html>
<head>
<style>  
.resizeDivClass  
{  
    position:relative;  
    width:4;  
    z-index:1;  
    left:expression(this.parentElement.offsetWidth - 3);  
    cursor:e-resize;
	
}  

.resizeDivClass2
{
	position:relative;
	
	width:expression(this.parentElement.offsetWidth);
	height:1px;
	border: solid 0px;
	
	z-index:1;
	top:expression(this.parentElement.offsetHeight - 5);
	cursor:n-resize; 
} 
</style>  
  
<script language=javascript>  
  
 function MouseDownToResize(obj)
 {  
 	obj.mouseDownX=event.clientX;  
 	obj.pareneTdW=obj.parentElement.offsetWidth;  
 	obj.pareneTableW=theObjTable.offsetWidth;  
 	obj.setCapture();  
 }  
 
 function MouseMoveToResize(obj)
 {  
  if(!obj.mouseDownX)
  {
  	return false;  
  }
  var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;  
  if(newWidth>0)  
  {  
 	obj.parentElement.style.width = newWidth;  
 	theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;  
 	}  
 }  
 function MouseUpToResize(obj)
 {  
 	obj.releaseCapture();  
 	obj.mouseDownX=0;  
 }  
 
 function MouseDownToResize2(obj)
 {  
 	obj.mouseDownY = event.clientY;  
 	obj.pareneTrH = obj.parentElement.offsetHeight;  
 	obj.pareneTableH=theObjTable.offsetHeight;  
 	obj.setCapture();  
 }  
 
 function MouseMoveToResize2(obj)
 {  
  	if(!obj.mouseDownY)
  	{
  		return false;  
  	}
  	var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;  
  
  	if(newWidth > 0)  
  	{  
 		obj.parentElement.style.height = newWidth;  
 		theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;  
 	}  
 }  

 function MouseUpToResize2(obj)
 {  
 	obj.releaseCapture();  
 	obj.mouseDownY=0;  
 }  
 
 </script>  
 </head>  
   
 <body>  
   
 改变table的列宽度  
 <table id=theObjTable STYLE="table-layout:fixed" border="1" >  
	 <tr bgcolor=cccccc >  
		 <td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
			aaa
		 </td>  
		<td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
		</td>  
		<td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
		</td>  
	 </tr>  
	   
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
			快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr>  
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>    
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>
	 </tr> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr> 
 </table>  
 </body>  
   
 </html>
复制下来试验一下吧。