javascript实现Table行和列的拖动

holdbelief

浏览: 697050 次
性别:
来自: 北京

最近访客更多访客>>

fengqingyebai

qq470497848

praise_song

my_program

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&Ajax

JavaScript 浏览器 HTML

Table表格拖动，既可以拖动行，也可以拖动列。代码如下：

<html>
<head>
<style>  
.resizeDivClass  
{  
    position:relative;  
    width:4;  
    z-index:1;  
    left:expression(this.parentElement.offsetWidth - 3);  
    cursor:e-resize;
	
}  

.resizeDivClass2
{
	position:relative;
	
	width:expression(this.parentElement.offsetWidth);
	height:1px;
	border: solid 0px;
	
	z-index:1;
	top:expression(this.parentElement.offsetHeight - 5);
	cursor:n-resize; 
} 
</style>  
  
<script language=javascript>  
  
 function MouseDownToResize(obj)
 {  
 	obj.mouseDownX=event.clientX;  
 	obj.pareneTdW=obj.parentElement.offsetWidth;  
 	obj.pareneTableW=theObjTable.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;  
 	theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;  
 	}  
 }  
 function MouseUpToResize(obj)
 {  
 	obj.releaseCapture();  
 	obj.mouseDownX=0;  
 }  
 
 function MouseDownToResize2(obj)
 {  
 	obj.mouseDownY = event.clientY;  
 	obj.pareneTrH = obj.parentElement.offsetHeight;  
 	obj.pareneTableH=theObjTable.offsetHeight;  
 	obj.setCapture();  
 }  
 
 function MouseMoveToResize2(obj)
 {  
  	if(!obj.mouseDownY)
  	{
  		return false;  
  	}
  	var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;  
  
  	if(newWidth > 0)  
  	{  
 		obj.parentElement.style.height = newWidth;  
 		theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;  
 	}  
 }  

 function MouseUpToResize2(obj)
 {  
 	obj.releaseCapture();  
 	obj.mouseDownY=0;  
 }  
 
 </script>  
 </head>  
   
 <body>  
   
 改变table的列宽度  
 <table id=theObjTable STYLE="table-layout:fixed" border="1" >  
	 <tr bgcolor=cccccc >  
		 <td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
			aaa
		 </td>  
		<td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
		</td>  
		<td valign=top >  
			<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
		</td>  
	 </tr>  
	   
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
			快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr>  
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>    
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>
	 </tr> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr> 
	 <tr>  
		<td valign=top >
			<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    bbbb
		</td>
		<td valign=top >
		    <div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
		    dddd
		</td>  
	 </tr> 
 </table>  
 </body>  
   
 </html>

复制下来试验一下吧。

分享到：

JavaScript的Prototype属性 | javascript 父窗口（父页面）— 子窗口 ( ...

2008-12-16 18:54
浏览 8429
评论(12)
论坛回复 / 浏览 (12 / 12932)
分类:Web前端
查看更多

12 楼 mazzystar 2009-05-20

附件好

11 楼冯冀川 2009-05-19

考虑到不同浏览器的兼容性，对table内的元素进行拖动基本不太现实

10 楼空月凌风 2009-05-13

LZ，这段代码你说的功能一点都没有实现！请检查！

9 楼 hfknight 2009-02-08

请问为何在ff3下无效果？

8 楼 hanjs 2009-02-08

下次传个附件多好啊。也能避免代码错误的问题。

ie7下也能实现拖拽

7 楼 kendy 2009-02-04

xuyao 写道

楼主的代码测过吗？

在IE8上经过测试，既不可以拖动行，也不可以拖动列。

6 楼 holdbelief 2008-12-18

fins 写道

楼主提供个附件会不会更好一些??

我测试过，我在单位做打印模块时，用的就是这段代码，对于附件，其实这只有一片文档，你把它复制到一个记事本里，然后把后缀改成.html，保存就可以看到结果了。

5 楼 holdbelief 2008-12-18

zhangshuling1214 写道

在代码的第60行 objobj.pareneTrH = obj.parentElement.offsetHeight;     应该是 obj.pareneTrH = obj.parentElement.offsetHeight;     还是很不错的东西

我不知道为什么，我已经注意到这个问题，但是当我打开文档的编辑状态时，第60行确确实实只有一个obj，但我已提交保存，就变成两个obj了。很灵异的想象...

4 楼 xuyao 2008-12-17

楼主的代码测过吗？

3 楼 wangyl_2008 2008-12-17

33行多 obj

2 楼 fins 2008-12-17

楼主提供个附件会不会更好一些??

1 楼 zhangshuling1214 2008-12-17

在代码的第60行
objobj.pareneTrH = obj.parentElement.offsetHeight;
应该是
obj.pareneTrH = obj.parentElement.offsetHeight;

还是很不错的东西

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论