js 表格拖动改变高和宽

最新推荐文章于 2023-12-07 10:06:40 发布

kingschan

最新推荐文章于 2023-12-07 10:06:40 发布

阅读量741

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/kingschan/article/details/84268284

版权

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏


<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>
			AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
		</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>