拖动改变表格宽度

最新推荐文章于 2021-06-22 23:52:08 发布

iteye_2829

最新推荐文章于 2021-06-22 23:52:08 发布

阅读量115

点赞数

<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 οnmοuseup="MouseUpToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοusedοwn="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;" οnmοusedοwn="MouseDownToResize(this);"οnmοusemοve="MouseMoveToResize(this);"οnmοuseup="MouseUpToResize(this);"> </font>
列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" οnmοusedοwn="MouseDownToResize(this);"οnmοusemοve="MouseMoveToResize(this);"οnmοuseup="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;" οnmοusedοwn="MouseDownToResize(this);"οnmοusemοve="MouseMoveToResize(this);"οnmοuseup="MouseUpToResize(this);"> </font>
列一
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" οnmοusedοwn="MouseDownToResize(this);"οnmοusemοve="MouseMoveToResize(this);"οnmοuseup="MouseUpToResize(this);"> </font>
列二
</td>
<td >
<font style="position:relative;width:2;z-index:1;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" οnmοusedοwn="MouseDownToResize(this);"οnmοusemοve="MouseMoveToResize(this);"οnmοuseup="MouseUpToResize(this);"> </font>
列三
</td>
</tr>
</table>
</body>
</html>