JS代码完成动态拖放表格的宽度
【实例名称】
JS代码实现动态拖放表格的宽度
【实例描述】
表格的宽度一般在页面设计时被静态指定：本例学习如何在页面运行时，动态改变表格的宽度。
【实例代码】
<html> <head> <title>Untitled Document-本站（www.xue51.com）</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> var dragenable=false; var x; var y; var w; var h; var obj; function init() { x=event.clientX+document.body.scrollLeft; //获取x坐标 obj=event.srcElement; //获取鼠标触发的元素 w=event.srcElement.offsetWidth; //对象的宽度 obj.setCapture(); //接受鼠标消息 if(x>event.srcElement.offsetLeft+w-5 && x<event.srcElement.offsetLeft+w) { //鼠标移动到对象边界时 dragenable=true;obj.style.cursor='e-resize';} //改变鼠标的样式-左右拖动型 } function drag() { if(event.clientX+document.body.scrollLeft>event. srcElement.offsetLeft+event.srcElement.offsetWidth-5 && event.clientX+document.body.scrollLeft<event. srcElement.offsetLeft+event.srcElement.offsetWidth) {event.srcElement.style.cursor='e-resize';} //改变鼠标的样式-左右拖动型 else event.srcElement.style.cursor='default'; //改变鼠标的样式-默认型 if(dragenable==true) { if(event.clientX+document.body.scrollLeft-x+w>0) { var i=obj.cellIndex; var j; for(j=0;j<obj.parentNode.parentNode.rows.length;j++) { //更改表格的宽度 obj.parentNode.parentNode.rows[j].cells[i].width= event.clientX+document.body.scrollLeft-x+w; } } else { var i=obj.cellIndex; var j; for(j=0;j<obj.parentNode.parentNode.rows.length;j++) { obj.parentNode.parentNode.rows[j].cells[i].width=1; //最小也要保持宽度为1 } } } } function end() //结束更改 { dragenable=false; obj.releaseCapture(); //释放鼠标的捕获 obj.style.cursor='default'; //更改鼠标的样式为默认 } </script> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0> 表格宽度设置为百分比显示 <br> <table width="60%" border="1" cellpadding="0" cellspacing="2" onmousedown=init() onmouseup=end() onmousemove=drag() id=table1 style="table-layout:fixed"> <tr> <td height="18" align="top"> </td> <td align="top"> </td> <td align="top"> </td> <td align="top"> </td> </tr> <tr> <td height="18" align="top"> </td> <td align="top"> </td> <td align="top"> </td> <td align="top"> </td> </tr> <tr> <td height="18" align="top"> </td> <td align="top"> </td> <td align="top"> </td> <td align="top"> </td> </tr> <tr> <td height="18" align="top"> </td> <td align="top"> </td> <td align="top"> </td> <td align="top"> </td> </tr> </table> </body> </html>
【运行效果】
【难点剖析】
本例的重点其实是鼠标坐标的获取。代码中使用_“event．srcElement”获取鼠标操作的对象，然后使用“offsetWidth”获取该对象的宽度。当鼠标移动到表格边界时，再动态改变鼠标的样式。
【源码下载】
如果你不愿复制代码及提高代码准确性，你可以点击：动态拖放表格的宽度 进行本实例源码下载
……