用拖动的方式改变表格宽度

最新推荐文章于 2021-11-20 16:30:28 发布

afdfgg

最新推荐文章于 2021-11-20 16:30:28 发布

阅读量1.1k

点赞数

分类专栏： HTML CSS 文章标签： function table class javascript

HTML CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<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" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
aaa</td>
<td valign=top >
<font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
ddd</td>
<td valign=top >
<font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
ddd</td>
</tr>

<tr>
<td>aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a</td><td>bbbb</td><td>dddd</td>
</tr>
</table>
</body>

</html>

<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> 改变table的列宽度

aaa	ddd	ddd
aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a	bbbb	dddd

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。