45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:怎么样拖动改变Table的列宽度?

怎么样拖动改变Table的列宽度?

2016-08-24 14:53:36 来源:www.45fan.com 【

怎么样拖动改变Table的列宽度?

<html>

<head>

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

<style>

.resizeDivClass

{

position:relative;

background-color:red;

width:2;

z-index:1;

left:expression(this.parentElement.offsetWidth-1);

cursor:e-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;

}

</script>

</head>

<body>

改变table的列宽度

<table id=theObjTable STYLE="table-layout:fixed" >

<tr bgcolor=cccccc >

<td valign=top >

<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>

改变table的列宽度</td>

<td valign=top >

<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>

改变table的列宽度</td>

<td valign=top >

<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>

改变table的列宽度</td>

</tr>

<tr>

<td>改变table的列宽度</td><td>改变table的列宽度</td><td>改变table的列宽度</td>

</tr>

</table>

</body>

</html>

本文地址:http://www.45fan.com/a/question/66907.html
Tags: 改变 拖动 table
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部