拖动改变表格宽度

20386053

浏览: 432919 次

最近访客更多访客>>

u012363178

wangyy

chuan518

iidioter

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (936)

社区版块

存档分类

2013-12 ( 121)
2013-11 ( 163)
2013-10 ( 64)
更多存档...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<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;
}
}

function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownX=0;
}
</script>

</head>
<body>
拖动表列改变table的列宽度
<table id=theObjTable border=1 >
<tr >
<td >
<font onmouseup="MouseUpToResize(this);" onmousemove="MouseMoveToResize(this);" onmousedown="MouseDownToResize(this);" style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;"> </font>
列一
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);"> </font>
列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);"> </font>
列三
</td>
</tr>

<tr >
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);"> </font>
列一
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);"> </font>
列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="MouseDownToResize(this);"onmousemove="MouseMoveToResize(this);"onmouseup="MouseUpToResize(this);"> </font>
列三
</td>
</tr>
</table>
</body>
</html>