软件学堂

网游分类软件分类

JS代码实现动态拖放表格的宽度

2012-10-31 来源:网络

【实例名称】

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">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>   </tr>   <tr>     <td height="18" align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>   </tr>   <tr>     <td height="18" align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>   </tr>   <tr>     <td height="18" align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>     <td align="top">&nbsp;</td>   </tr> </table> </body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点其实是鼠标坐标的获取。代码中使用_“event.srcElement”获取鼠标操作的对象,然后使用“offsetWidth”获取该对象的宽度。当鼠标移动到表格边界时,再动态改变鼠标的样式。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:动态拖放表格的宽度 进行本实例源码下载 

上一篇:JS代码实现交换表的行
下一篇:PS图片处理:瞬间让人物美白

相关文章