请问怎么样将一个table的行拖到另一个table上去?

cansum396 2009-01-05 10:33:25
一个页面上有两个结构一样的table
我想拖动table1的某行到table2里
...全文
348 19 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
cansum396 2009-01-12
  • 打赏
  • 举报
 回复
搞定结贴
cansum396 2009-01-08
  • 打赏
  • 举报
 回复
没人?
varlj 2009-01-05
  • 打赏
  • 举报
 回复
大概写了一下，根据需要再慢慢改吧



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>无标题文档</title>

</head>

<body>

<table border="1" id="tab1" width="400">

	<tr>

		<td>111</td>

		<td>222</td>

		<td>333</td>

	</tr>

	<tr>

		<td>1111</td>

		<td>2222</td>

		<td>3333</td>

	</tr>

	<tr>

		<td>11111</td>

		<td>22222</td>

		<td>33333</td>

	</tr>

	<tr>

		<td>111111</td>

		<td>222222</td>

		<td>333333</td>

	</tr>

</table>

<table border="1" id="tab2" width="400">

	<tbody>

	<tr>

		<td>aaa</td>

		<td>bbb</td>

		<td>ccc</td>

	</tr>

	<tr>

		<td>aaaa</td>

		<td>bbbb</td>

		<td>cccc</td>

	</tr>

	<tr>

		<td>aaaaa</td>

		<td>bbbbb</td>

		<td>ccccc</td>

	</tr>

	<tr>

		<td>aaaaaa</td>

		<td>bbbbbb</td>

		<td>cccccc</td>

	</tr>

	</tbody>

</table>

<script type="text/javascript">

var floatDiv = null;

var floatRow = null;

var oft = null;

function $(id)

{

	return document.getElementById(id);

}

function $c(tag,ct)

{

	var el = document.createElement(tag);

	if(ct)

		ct.appendChild(el);

	return el;

}



//取得节点位置

function getDomOffset(el)

{

	for(var lx=0,ly=0;el!=null; el=el.offsetParent)

	{

		lx+=el.offsetLeft;

		ly+=el.offsetTop;

	}   

	return   {x:lx,y:ly}   

}



//取得节点矩形大小，不是很精确，不过差不多可以用了

function getRect(el)

{

	var pos = getDomOffset(el);

	return {

		x:pos.x,

		y:pos.y,

		cx:el.clientWidth,

		cy:el.clientHeight

	}

}



//鼠标是否在矩形内

function ptInRect(pt,rect)

{

	return pt.x>rect.x && pt.x<rect.x+rect.cx && pt.y>rect.y && pt.y<rect.y+rect.cy;

}



//取得鼠标位置

function getMouse(ev)

{

     if(ev.pageX || ev.pageY)

     {         

          return {x:ev.pageX, y:ev.pageY};

     }

     return {         

          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 

          y:ev.clientY + document.body.scrollTop  - document.body.clientTop     

     }; 

} 



//鼠标按下事件处理函数

function down()

{

	var evt = window.event || arguments[0];

	var el = evt.srcElement || evt.target;

	if( el.tagName.toLowerCase() != "td" )

		return;

	

	floatRow = el.parentNode;

	var pos = getDomOffset(floatRow);

	var mouse = getMouse(evt);

	oft = {

		x:mouse.x - pos.x,

		y:mouse.y - pos.y

	};

	floatDiv = $c("div",document.body);

	floatDiv.style.width = floatRow.clientWidth + "px";

	floatDiv.style.height = floatRow.clientHeight + "px";

	floatDiv.style.border = "dotted 2px #b45";

	floatDiv.style.left = pos.x + "px";

	floatDiv.style.top = pos.y + "px";

	floatDiv.style.position = "absolute";

}



//鼠标抬起事件处理函数

function up()

{

	if(floatDiv)

	{

		document.body.removeChild(floatDiv);

		floatDiv = null;

	}

		

	var evt = window.event || arguments[0];

	var rect = getRect( $("tab2") );

	var mouse = getMouse(evt);

	if( ptInRect(mouse,rect) )

	{

		//要第一个表格那里，选中的行不消失，就用下面这语句

		//$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );

		//下面的语句会删除第一个表格中的行

		$("tab2").tBodies[0].appendChild( floatRow );

	}

}



//鼠标移动事件处理函数

function move()

{

	if(floatDiv)

	{

		var evt = window.event || arguments[0];

		var pos = getMouse(evt);

		floatDiv.style.left = pos.x - oft.x + "px";

		floatDiv.style.top = pos.y - oft.y + "px";

	}

}



window.onload = function()

{

	document.body.onmousedown = down;

	document.body.onmouseup = up;

	document.body.onmousemove = move;

}

</script>

</body>

</html>
杨哥儿 2009-01-05
  • 打赏
  • 举报
 回复
AJAX可以实现这个功能.我见过!!
但代码我不会.
dayizhixiaotutu 2009-01-05
  • 打赏
  • 举报
 回复
Up
selad 2009-01-05
  • 打赏
  • 举报
 回复
我晕 这个貌似很难
去研究下表格排序
Sortable.create("list");//排序表格
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
<table id='t1'>
<tr id='tr1'>
<td>拖动我</td>
</tr>
</table>

<table id='t2'>
<tr id='tr2'>
<td>我在这</td>
</tr>
</table>

把tr1拖到t2,并在t2上增加tr1的内容
ximizhi 2009-01-05
  • 打赏
  • 举报
 回复
拖动后直接就进入了table2了吗？？
summer0214 2009-01-05
  • 打赏
  • 举报
 回复
怎么拖动，需要什么样的功能？
空心兜兜 2009-01-05
  • 打赏
  • 举报
 回复
学习下
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
拿JK大虾的源代码改了下,基本上实现了我要的功能


<html>   

  <head>   

  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   

  <title>JK:支持民族工业,尽量少买X货</title>   

  <style>   

  .removableObj   

  {   

  height:25;position:relative;   

  }   

  </style>   

  <script   language="javascript">   

  var   beginMoving=false;   

  var   sourceObj=null;   

  var   objectObj=null;   

  var   objectObj2=null;   

  function   MouseDownToMove(obj){   

  obj.style.zIndex=1;   

  obj.mouseDownY=event.clientY;   

  obj.mouseDownX=event.clientX;   

  beginMoving=true;   

  obj.setCapture();   

  sourceObj=obj;   

  objectObj=null;   

  }   

    

  function   MouseMoveToMove(obj){   

          if(!beginMoving)   return   false;   

  obj.style.top   =   (event.clientY-obj.mouseDownY);   

  obj.style.left   =   (event.clientX-obj.mouseDownX);   

  }   

  function   MouseUpToMove(obj){   

  if(!beginMoving)   return   false;   

  obj.releaseCapture();   

  obj.style.top=0;   

  obj.style.left=0;   

  obj.style.zIndex=0;   

  beginMoving=false;   

  window.setTimeout("swapFun()",20);   

  }   

    

  function   MouseOverFun(obj)   

  {   

  if(obj==sourceObj)   return   false;   

  objectObj=obj;   

  }   

    

  function   MouseOverFun2(obj)   

  {   

  objectObj2=obj;   

  }   

    

  function   swapFun() {

      //if (objectObj == null) return false;

      if (sourceObj == objectObj2) {

          sourceObj = null;

          objectObj = null;

          objectObj2 = null;

          beginMoving = false;

      }

  if(sourceObj!=null   &&   objectObj!=null)   objectObj.parentNode.insertAdjacentElement("beforeBegin",sourceObj);

  else if (sourceObj != null && objectObj2 != null) objectObj2.parentNode.insertAdjacentElement("beforeEnd", sourceObj);   

  

  sourceObj=null;   

  objectObj=null;

  objectObj2 = null;

  beginMoving = false;

  }   

  </script>   

  </head>   



  <body>   

    

               <table   border="1"   width="40%"   bgcolor="#99CCFF"   align='left' >   

                  <tr  onmouseover='MouseOverFun2(this);'   class='removableObj'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">和</td>   

                      <td   width="21%">飞过海</td>   

                  </tr>   

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">　</td>   

                      <td   width="21%">　</td>   

                  </tr>

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">和1</td>   

                      <td   width="21%">飞过海1</td>   

                  </tr>

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">A　</td>   

                      <td   width="21%">B　</td>   

                  </tr>

              </table>



      <table   border="1"   width="40%"   bgcolor="#FF9966"    >   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">还是</td>   

                      <td   width="35%">护身符哈</td>   

                      <td   width="21%">　</td>   

                      <td   width="23%">呵呵</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">，</td>   

                      <td   width="35%">和是是护</td>   

                      <td   width="21%">　</td>   

                      <td   width="23%">和</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">还是1111</td>   

                      <td   width="35%">护身符哈sfds</td>   

                      <td   width="21%">　fsdafsaf1`</td>   

                      <td   width="23%">呵呵32edfdsfdsaf</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">213ewfdsfc，</td>   

                      <td   width="35%">和是是护fdsafdsaf</td>   

                      <td   width="21%">　fdsafdasf</td>   

                      <td   width="23%">和fdsafdds</td>   

                  </tr>                     

              </table>           



  </body>   

  </html>


现在的问题是怎么样把拖动的行放到停靠行的后面?而不是在最后加一行
zzxap 2009-01-05
  • 打赏
  • 举报
 回复
花耍的东西
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
而且这两个表自己的行也可以交换
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
如果我要将两个表的行互相拖来拖去呢?
varlj 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 czp0608 的回复:]
怎么没用？？？
[/Quote]

我测试了IE7和FF3，都可以用啊
估计我声明的是UTF-8，你看看是不是把编码搞错了，里面的注释是中文的，编码错了就出错了
varlj 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 cansum396 的回复:]
不错
但floatDiv怎么能够与floatRow 一模一样呢?
[/Quote]

大概，把down函数这样改一下吧


function down()

{

	var evt = window.event || arguments[0];

	var el = evt.srcElement || evt.target;

	if( el.tagName.toLowerCase() != "td" )

		return;

	

	floatRow = el.parentNode;

	var pos = getDomOffset(floatRow);

	var mouse = getMouse(evt);

	oft = {

		x:mouse.x - pos.x,

		y:mouse.y - pos.y

	};

	floatDiv = $c("div",document.body);

	//floatDiv.style.width = floatRow.clientWidth + "px";

	//floatDiv.style.height = floatRow.clientHeight + "px";

	//floatDiv.style.border = "dotted 2px #b45";

	floatDiv.style.left = pos.x + "px";

	floatDiv.style.top = pos.y + "px";

	floatDiv.style.position = "absolute";

	var tab = $("tab1").cloneNode(false);

	var tbd = $c("tbody",tab);

	tbd.appendChild(floatRow.cloneNode(true));

	floatDiv.appendChild(tab);//在up里，你要愿意，就把floatDiv清空一下，不清空也不会出错

}
不悲不喜 2009-01-05
  • 打赏
  • 举报
 回复
给楼上的代码修饰一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

    </head>

    <body>

		<table border="1" id="tab1" width="400">

		    <tr>

		        <td>111</td>

		        <td>222</td>

		        <td>333</td>

		    </tr>

		    <tr>

		        <td>1111</td>

		        <td>2222</td>

		        <td>3333</td>

		    </tr>

		    <tr>

		        <td>11111</td>

		        <td>22222</td>

		        <td>33333</td>

		    </tr>

		    <tr>

		        <td>111111</td>

		        <td>222222</td>

		        <td>333333</td>

		    </tr>

		</table>

		<table border="1" id="tab2" width="400">

		    <tbody>

		    <tr>

		        <td>aaa</td>

		        <td>bbb</td>

		        <td>ccc</td>

		    </tr>

		    <tr>

		        <td>aaaa</td>

		        <td>bbbb</td>

		        <td>cccc</td>

		    </tr>

		    <tr>

		        <td>aaaaa</td>

		        <td>bbbbb</td>

		        <td>ccccc</td>

		    </tr>

		    <tr>

		        <td>aaaaaa</td>

		        <td>bbbbbb</td>

		        <td>cccccc</td>

		    </tr>

		    </tbody>

		</table>

		

        <script type="text/javascript">

            var floatDiv = null;

            var floatRow = null;

            var oft = null;

            function $(id){

                return document.getElementById(id);

            }

            

            function $c(tag, ct){

                var el = document.createElement(tag);

                if (ct) 

                    ct.appendChild(el);

                return el;

            }

            

            //取得节点位置

            function getDomOffset(el){

                for (var lx = 0, ly = 0; el != null; el = el.offsetParent) {

                    lx += el.offsetLeft;

                    ly += el.offsetTop;

                }

                return {

                    x: lx,

                    y: ly

                }

            }

            

            //取得节点矩形大小，不是很精确，不过差不多可以用了

            function getRect(el){

                var pos = getDomOffset(el);

                return {

                    x: pos.x,

                    y: pos.y,

                    cx: el.clientWidth,

                    cy: el.clientHeight

                }

            }

            

            //鼠标是否在矩形内

            function ptInRect(pt, rect){

                return pt.x > rect.x && pt.x < rect.x + rect.cx && pt.y > rect.y && pt.y < rect.y + rect.cy;

            }

            

            //取得鼠标位置

            function getMouse(ev){

                if (ev.pageX || ev.pageY) {

                    return {

                        x: ev.pageX,

                        y: ev.pageY

                    };

                }

                return {

                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

                    y: ev.clientY + document.body.scrollTop - document.body.clientTop

                };

            }

            

            //鼠标按下事件处理函数

            function down(){

                var evt = window.event || arguments[0];

                var el = evt.srcElement || evt.target;

                

                if (el.tagName.toLowerCase() != "td") 

                    return;

                

                floatRow = el.parentNode;

                var pos = getDomOffset(floatRow);

                var mouse = getMouse(evt);

                

                oft = {

                    x: mouse.x - pos.x,

                    y: mouse.y - pos.y

                };

                

                floatDiv = $c("div", document.body);

                floatDiv.style.width = floatRow.clientWidth + "px";

                floatDiv.style.height = floatRow.clientHeight + "px";

                floatDiv.style.border = "dotted 2px #b45";

                floatDiv.style.left = pos.x + "px";

                floatDiv.style.top = pos.y + "px";

                floatDiv.style.position = "absolute";

                

                var str = '<table border="1" id="tab1" width="400">';

                str += floatRow.outerHTML;

                str += '</table>';

                

                floatDiv.innerHTML = str;

            }

            

            //鼠标抬起事件处理函数

            function up(){

                if (floatDiv) {

                    document.body.removeChild(floatDiv);

                    floatDiv = null;

                }

                

                var evt = window.event || arguments[0];

                var rect = getRect($("tab2"));

                var mouse = getMouse(evt);

                if (ptInRect(mouse, rect)) {

                    //要第一个表格那里，选中的行不消失，就用下面这语句

                    //$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );

                    //下面的语句会删除第一个表格中的行

                    $("tab2").tBodies[0].appendChild(floatRow);

                }

            }

            

            //鼠标移动事件处理函数

            function move(){

                if (floatDiv) {

                    var evt = window.event || arguments[0];

                    var pos = getMouse(evt);

                    floatDiv.style.left = pos.x - oft.x + "px";

                    floatDiv.style.top = pos.y - oft.y + "px";

                }

            }

            

            window.onload = function(){

                document.body.onmousedown = down;

                document.body.onmouseup = up;

                document.body.onmousemove = move;

            }

        </script>

    </body>

</html>
NickCheng 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 varlj 的回复:]
大概写了一下，根据需要再慢慢改吧

HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>无标题文档</title></head><body><tableborder="1"id="tab1"width="400"><tr><td>111</td><td>222</td><td>333</td></t…
[/Quote]
怎么没用？？？
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
不错
但floatDiv怎么能够与floatRow 一模一样呢?
Map-Punctuation-Tool:地图标点工具：一个能将海量经纬度坐标在地图上标出来的小工具，只有12MB，借用了百度的API，以网页的形式呈现
(●'◡'●)地图标点工具：一个能将海量经纬度坐标在地图上标出来的小工具，只有12MB，借用了百度的API，以网页的形式呈现。Table of Contents 内容列表Usage 使用说明步骤1：首先将execl文件处理成以下格式，并另存...
虚拟 DJ 混音器 Virtual DJ
在“Mix Table（混音面盘）”区域有四个按钮，分别提供了不同的效果，比如单击第二个按钮,下方就会显示出Loop特效设置区，这里我们可以选择多种Loop添加到音乐中，利用这一功能可为音乐增加声音、弦乐、颤音、噪音等...
css笔记课程笔记2019，5，22
* 对数据进行操作，需要把数据放到一个区域里面（div） 5、布局的漂浮(了解) float - left: 后面的div到右边 - right：后面的div到左边 6、布局的定位(了解) position - absolute ** 从文档流中拖出 -...
笔试题-CAD笔试考试题目范文.docx
* 希望将一个物体的特性应用到其它的对象上去，可以用“MATCHPROP”命令。 九、布尔运算 * 在 AutoCAD 中，只有 Solid 和 Surface 能进行布尔运算。 * 圆用点的等分操作时，输入 6，会出现 6 个点；直线用点的等分...
element-table横滚轴固定显示
如果我想看拖动横滚轴的话，我必须要将页面拖到表格底部，再拖动横滚轴，然后再将页面滚到上面查看被遮挡的信息。。。 设想： 如果当数据表的数据超出窗口显示区域时，横滚轴固定显示到可视区域的底部，那就方便多...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章