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

<table id='t1'>
  <tr id='tr1'>
    <td>拖动我</td>
  </tr>
</table><table  id='t2'>
  <tr  id='tr2'>
    <td>我在这</td>
  </tr>
</table>把tr1拖到t2,并在t2上增加tr1的内容

我晕这个貌似很难
去研究下表格排序
Sortable.create("list");//排序表格

AJAX可以实现这个功能.我见过!!
但代码我不会.

大概写了一下，根据需要再慢慢改吧
<!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>

不错
但floatDiv怎么能够与floatRow 一模一样呢?

给楼上的代码修饰一下.
<!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>

大概，把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清空一下，不清空也不会出错
}

我测试了IE7和FF3，都可以用啊
估计我声明的是UTF-8，你看看是不是把编码搞错了，里面的注释是中文的，编码错了就出错了

拿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>
现在的问题是怎么样把拖动的行放到停靠行的后面?而不是在最后加一行

调试易

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

解决方案 »