table

最新推荐文章于 2024-09-04 14:45:59 发布

scauzsty

最新推荐文章于 2024-09-04 14:45:59 发布

阅读量115

点赞数

文章标签：算法

里面是一个可以运行的页面:

<html>
<head>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:4;
height:30;
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-3);
cursor:n-resize;
}
</style>

<script language=javascript>

function MouseDownToResize(obj)
{
obj.mouseDownX=event.clientX;//当前鼠标位置的X值
obj.pareneTdW=obj.parentElement.offsetWidth;//列的宽度
obj.pareneTableW=theObjTable.offsetWidth; //table的宽度,整个宽度
obj.setCapture();
//top 
//alert(obj.parentElement.offsetWidth);
//alert(theObjTable.offsetWidth);
}

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();
/*
setCapture函数的作用就是将后续的mouse事件都发送给这个对象，releaseCapture就是将鼠标事件还回去，由 document、window、object之类的自行来处理，这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰
object.setCapture() 当一个object的被 setCapture 后，他的方法将会被继承到整个文档进行捕获。
当不需要把方法继承到整个文档捕获时，要用 object.releaseCapture()
*/
obj.mouseDownX=0;
}

function MouseDownToResize2(obj) //事件会在鼠标按下时发生
{
obj.mouseDownY = event.clientY;
obj.pareneTrH = obj.parentElement.offsetHeight;//行的高度
obj.pareneTableH=theObjTable.offsetHeight;// //获得table的高度
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="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>

aaa
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<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>

scauzsty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table

里面是一个可以运行的页面: .resizeDivClass { position:relative; background-color:red; width:4; height:30; z-index:1; left:expression(this.parentE...
复制链接

扫一扫