当前位置:主页   - 电脑 - 程序设计 - JAVA
java web可以拖动表格单元格大小的html,鼠标拖动改变表格大小
来源:网络   作者:   更新时间:2012-06-11
收藏此页】    【字号    】    【打印】    【关闭

  效果图:拖动带颜色位置上的竖杠,可以左右拖动表格宽度,上下宽度一起改变

  缺点:拖动点极其精确,想拖动一次要有耐心

  再帖代码:

  Html代码

<html>    
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<style>  
.resizeDivClass   
{   
position:absolute;   
background-color:gray;   
width:1;   
z-index:1;   
left:1;   
cursor:e-resize;    
}    
.td1 {    
 font-size: 12px;   
 white-space:nowrap;   
 overflow:hidden;      
 text-overflow:ellipsis;   
 color:#0000ff;      
 pos:expression(this.offsetLeft*1+this.offsetWidth*1+tab.offsetLeft);    
}    
</style>  
<script language=javascript>    
function MouseDownToResize(obj){     
 obj.mouseDownX=event.clientX;   
 objobj.pareneTdW=obj.parentElement.offsetWidth;   
 obj.pareneTableW=tab.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;   
   tab.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;   
   for (var i=1; i<=tab.rows(0).cells.length;i++){   
     var obj = eval("mydiv"+i);       
      objobj.style.left = obj.parentElement.offsetLeft*1+obj.parentElement.offsetWidth*1+tab.offsetLeft;//obj.parentElement.style.pos;   
   }   
 }   
}   
function MouseUpToResize(obj){   
  obj.releaseCapture();   
  obj.mouseDownX=0;   
}    
  
function init(){     
  var tempStr = "";   
  for (var i=1; i<=tab.rows(0).cells.length;i++){   
    tempStr = '<div id="mydiv'+i+'" class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></div>';         
    tab.rows(0).cells(i-1).innerHTML = tab.rows(0).cells(i-1).innerHTML+tempStr;        
    var obj = eval("mydiv"+i);       
    objobj.style.left = obj.parentElement.style.pos;       
  }   
     
}   
</script>    
</head>    
<body onload="init()">  
<table id=tab STYLE="table-layout:fixed;" >  
<tr bgcolor=cccccc >  
<td valign=top class="td1" ><nobr>改变table的列宽度改</nobr></td>  
<td valign=top class="td1" ><nobr>改变table的列宽度改</nobr></td>  
<td valign=top class="td1" ><nobr>改变table的列宽度改</nobr></td>  
</tr>    
  
<tr>  
<td class="td1"><nobr>改变table的列宽度</nobr></td>  
<td class="td1"><nobr>改变table的列宽度</nobr></td>  
<td class="td1"><nobr>改变table的列宽度</nobr></td>  
</tr>  
</table>  
</body>  
</html>

  出处:http://heisetoufa.javaeye.com

其它资源
来源声明

版权与免责声明
1、本站所发布的文章仅供技术交流参考,本站不主张将其做为决策的依据,浏览者可自愿选择采信与否,本站不对因采信这些信息所产生的任何问题负责。
2、本站部分文章来源于网络,其版权为原权利人所有。由于来源之故,有的文章未能获得作者姓名,署“未知”或“佚名”。对于这些文章,有知悉作者姓名的请告知本站,以便及时署名。如果作者要求删除,我们将予以删除。除此之外本站不再承担其它责任。
3、本站部分文章来源于本站原创,本站拥有所有权利。
4、如对本站发布的信息有异议,请联系我们,经本站确认后,将在三个工作日内做出修改或删除处理。
请参阅权责声明