2012-10-30 来源:网络
【实例名称】
表格动态改变表格列宽
【实例描述】
每个控件都有很多的属性,如id、name、样式、高度、宽度、value等。项目中经常需要修改这些属性值,本例就学习如何获取页面元素的属性。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页-学无忧(www.xue51.com)</title> <style> .resizeDivClass { position:relative; background-color:gray; 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; //当前鼠标X坐标 obj.pareneTdW=obj.parentElement.offsetWidth; //父元素的宽度 obj.pareneTableW=table1.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; table1.style.width=obj.pareneTableW* 1+event.clientX*1-obj.mouseDownX; //重新设计宽度 } } //鼠标抬起时的方法 function MouseUpToResize(obj) { obj.releaseCapture(); //释放鼠标的捕获 obj.mouseDownX=0; //鼠标抬起 }
</script> </head> <body> <table id=table1 STYLE="table-layout:fixed" > <tr bgcolor=cccccc > <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 姓名</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 年龄</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 所在城市</td> </tr>
<tr> <td>长三</td><td>35</td><td>中国山东省济南市天桥区</td> </tr> </table> </body> </html>
【运行效果】
【难点剖析】
本例的重点是捕获鼠标的单击和移动事件,同时还要注意鼠标图形的变换。其中“setcapture’’主要用来捕获鼠标操作,而“ReleaseCapture”是用来释放鼠标的捕获的。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:动态改变表格列宽 进行本实例源码下载