恩达

可爱的儿子--阳阳坨

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  43 随笔 :: 14 文章 :: 55 评论 :: 0 Trackbacks

<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;
 obj.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);   
      obj.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);   
    obj.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>

 

posted on 2006-05-29 15:11 恩达 阅读(1970) 评论(8)  编辑  收藏 所属分类: JAVASCRIPT

评论

# re: 表格拖动(改进加原创) 2006-05-30 08:13 恩达
大家在测试时有什么问题欢迎提出来一起探讨  回复  更多评论
  

# re: 表格拖动(改进加原创) 2006-06-01 15:57 yufeng0681
style 少了一个<   回复  更多评论
  

# re: 表格拖动(改进加原创) 2006-06-01 16:05 恩达
谢谢,马上更正,呵呵。  回复  更多评论
  

# re: 表格拖动(改进加原创) 2006-07-03 18:10 tianzi
能不能实现,拖动下一个表格时实现上一个表格改变大小
希望得到回复betye9684@163.com  回复  更多评论
  

# re: 表格拖动(改进加原创) 2006-07-05 10:02 恩达
你是说两个表格连动吗?可否详细说一下  回复  更多评论
  

# re: 表格拖动(改进加原创) 2007-02-03 13:10 BeanSoft
FireFox 下似乎不行. WebFx 的可以: http://webfx.eae.net/dhtml/collist/demo.html  回复  更多评论
  

# re: 表格拖动(改进加原创) 2007-02-05 09:44 恩达
我这个是为公司在IE下的系统平台增加拖动功能做的一个测试用例,在FireFox下没做过调试,主要是也没有这个需求,呵呵。  回复  更多评论
  

# re: 表格拖动(改进加原创) 2008-11-28 16:48 nm
pos:expression(this.offsetLeft*1+this.offsetWidth*1+tab.offsetLeft);
不要用这个,完全没必要,只会降低用户体验  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: