♀表格行之间的拖拽，请高手指教！♂

改了一下
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;   charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>    <script language="javascript">  
  var   beginMoving=false;  
  var dragobj = null;
  
  function   MouseDownToMove(obj){  
  dragobj = obj;
  dragobj.style.zIndex=1;  
  dragobj.mouseDownY=event.clientY;  
  dragobj.mouseDownX=event.clientX;  
  beginMoving=true;  
  dragobj.setCapture();  
  }  
   
  document.onmousemove = function(e){
     if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
     if(beginMoving){
        dragobj.style.top   =   (event.clientY-dragobj.mouseDownY);  
        dragobj.style.left   =   (event.clientX-dragobj.mouseDownX);  
     
     }
     
  }
      document.onmouseup = function(){
      beginMoving=false;//拖拽变量设为false
      if(document.all && dragobj != null){
         dragobj.releaseCapture();
          dragobj.style.top=0;  
          dragobj.style.left=0;  
          dragobj.style.zIndex=0; 
          var   tempTop=event.clientY-dragobj.mouseDownY;  
          var   tempRowIndex=(tempTop-tempTop%25)/25;  
          if(tempRowIndex+dragobj.rowIndex <0   )tempRowIndex=-1;  
          else   tempRowIndex=tempRowIndex+dragobj.rowIndex;  
          if(tempRowIndex>=dragobj.parentElement.rows.length-1)   tempRowIndex   =   dragobj.parentElement.rows.length-1;  
          dragobj.parentElement.moveRow(dragobj.rowIndex,tempRowIndex);   
          
          
          dragobj = null;
          }
   }
       </script></head>
<body>
    <table id="tbl" width="300" border="1">
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                0</td>
            <td>
                0</td>
            <td>
                0</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                1</td>
            <td>
                1</td>
            <td>
                1</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                2</td>
            <td>
                2</td>
            <td>
                2</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                3</td>
            <td>
                3</td>
            <td>
                3</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                4</td>
            <td>
                4</td>
            <td>
                4</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                5</td>
            <td>
                5</td>
            <td>
                5</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                6</td>
            <td>
                6</td>
            <td>
                6</td>
        </tr>
        <tr bgcolor="#ffffff" style='height: 25; position: relative;'>
            <td bgcolor="gray" width="20px" onmousedown='MouseDownToMove(this.parentElement)'
                >
            </td>
            <td>
                7</td>
            <td>
                7</td>
            <td>
                7</td>
        </tr>
    </table>
</body>
</html>

解决方案 »

  1.   

    dragobj.parentElement.moveRow(dragobj.rowIndex,tempRowIndex);  
    这一句后面加一句： 
              dragobj.parentNode.parentNode.insertBefore(dragobj.parentNode,dragobj.parentNode.nextSibling);   
      

  2.   

    您好，烦劳看一下下面的代码，我在调换行中加了CheckBox，在勾选CheckBox后调换行序会出现CheckBox勾选混乱的问题，不知道如何解决，还请指教！<HTML>
    <HEAD>
    <TITLE>JK:支持民族工业,尽量少买X货</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <SCRIPT language=javascript>  
      var beginMoving=false; 
      var obj = null;
      function   MouseDownToMove(o){ 
      obj = o; 
    //  obj.parentNode.parentNode.insertBefore(obj.parentNode,obj.parentNode.nextSibling);
      obj.style.zIndex=1;  
      obj.mouseDownY=event.clientY;  
      obj.mouseDownX=event.clientX;  
      beginMoving=true;  
      obj.setCapture();  
      }  
       
    document.onmousemove = function(e){
        if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
        if(beginMoving){
        obj.style.top = (event.clientY-obj.mouseDownY);
        obj.style.left = (event.clientX-obj.mouseDownX);
        }
    }document.onmouseup = function(){
    beginMoving=false;//拖拽变量设为false
    if(document.all && obj != null){
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    var tempTop=event.clientY-obj.mouseDownY;
    var tempRowIndex=(tempTop-tempTop%25)/25;
    if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=0;
    else tempRowIndex=tempRowIndex+obj.rowIndex;
    if(tempRowIndex>=obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
    obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
    obj.parentNode.insertBefore(obj,obj.nextSibling);obj = null;
    }
    }//  function   MouseUpToMove(obj){  
    //  if(!beginMoving)   return   false;  
    //  obj.releaseCapture();  
    //  obj.style.top=0;  
    //  obj.style.left=0;  
    //  obj.style.zIndex=0;  
    //  beginMoving=false;  
    //  var   tempTop=event.clientY-obj.mouseDownY;  
    //  var   tempRowIndex=(tempTop-tempTop%25)/25;  
    //  if(tempRowIndex+obj.rowIndex   <0   )tempRowIndex=0;  
    //  else   tempRowIndex=tempRowIndex+obj.rowIndex;  
    //  if(tempRowIndex   >=   obj.parentElement.rows.length-1)   tempRowIndex   =   obj.parentElement.rows.length-1;  
    //  obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);  
    //  
    //  obj.parentNode.insertBefore(obj,obj.nextSibling);
    //  
    //  }  
    </SCRIPT><META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
    <BODY>
    <FORM id=form1 name=form1>
    <DIV>
    <TABLE cellSpacing=0 cellPadding=0 border=0>
      <TBODY>
      <TR>
        <TD>
          <TABLE id=HeaderTable cellSpacing=0 cellPadding=0 border=1>
            <TBODY>
            <TR bgcolor="gray">
              <TD align=center width=40>序号</TD>
              <TD align=center width=40>显示</TD>
              <TD align=center width=200>名称</TD>
              <TD align=center width=40>分组</TD>
              <TD align=center width=40>小计</TD>
              <TD align=center width=40>合计</TD></TR></TBODY></TABLE></TD>
    </TR>
      <TR>
        <TD>
          <TABLE id=ContentTable cellSpacing=0 cellPadding=0 border=1>
            <TBODY>
            <TR
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>0</TD>
              <TD  width=40><INPUT  type=checkbox 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>数量</TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>1</TD>
              <TD  width=40><INPUT  type=checkbox 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>单价</TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>2</TD>
              <TD  width=40><INPUT  type=checkbox 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>产品名</TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>3</TD>
              <TD  width=40><INPUT  type=checkbox 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>已发货</TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox 
                name=checkSum></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </DIV>
    </FORM></BODY></HTML>
      

  3.   

    客户端Table在moveRow之后checkbox状态并不保存
    所以只能自己在字符串中即时保存状态
    这里实现第一列checkbox 其他的类推,不想写太多重复代码LZ自己补全拉<HTML>
    <HEAD>
    <TITLE>JK:支持民族工业,尽量少买X货</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <SCRIPT language=javascript>  
      var beginMoving=false; 
      var obj = null;
      
      var checkDisplay_state = "";//记录该列checkbox状态－"0|true|1|true|2|true|3|true"  
      function window.onload()
      {
          Init();
      }
      
      function Init()
      {
         //初始化状态字符串
            var display = document.getElementsByName("checkDisplay");
            for(var i=0;i<display.length;i++)
            {
                checkDisplay_state = checkDisplay_state.concat(display[i].parentElement.parentElement.firstChild.innerHTML+"|"+display[i].checked+"|");
            }
            checkDisplay_state = checkDisplay_state.substring(0,checkDisplay_state.length-1);
      }
      
        function setState(obj)
        {
            var rep_str="";
            var res_str="";
            
            if(obj.checked == true)
            {
                rep_str = obj.parentElement.parentElement.firstChild.innerHTML +"|"+"false";
                res_str = obj.parentElement.parentElement.firstChild.innerHTML +"|"+"true";
            }
            else
            {
                rep_str = obj.parentElement.parentElement.firstChild.innerHTML +"|"+"true";
                res_str = obj.parentElement.parentElement.firstChild.innerHTML +"|"+"false";
            }
            
            if(obj.name=="checkDisplay")
            {
                checkDisplay_state = checkDisplay_state.replace (rep_str,res_str);
            }        
        }
        
        function BindCheckBox()
        {
        //根据状态字符串设定checkbox
            var i,j,ind;
            var checkdisplay = checkDisplay_state.split('|');
            var display = document.getElementsByName("checkDisplay");
            for(i=0;i<checkdisplay.length;i+=2)
            {
                ind =i+1;
                if(checkdisplay[ind]=="true")
                {
                    for(j=0;j<display.length;j++)
                    {
                        if(display[j].parentElement.parentElement.firstChild.innerHTML==checkdisplay[i])
                        {
                            display[j].checked = true;
                        }
                    }
                }
                else
                {
                     for(j=0;j<display.length;j++)
                    {
                        if(display[j].parentElement.parentElement.firstChild.innerHTML==checkdisplay[i])
                        {
                            display[j].checked = false;
                        }
                    }
                }
            }
        }
      
      
      function   MouseDownToMove(o){ 
      obj = o; 
      obj.style.zIndex=1;  
      obj.mouseDownY=event.clientY;  
      obj.mouseDownX=event.clientX;  
      beginMoving=true;  
      obj.setCapture();  
      }  
       
    document.onmousemove = function(e){
        if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
        if(beginMoving){
        obj.style.top = (event.clientY-obj.mouseDownY);
        obj.style.left = (event.clientX-obj.mouseDownX);
        }
    }document.onmouseup = function(){
    beginMoving=false;//拖拽变量设为false
    if(document.all && obj != null){
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    var tempTop=event.clientY-obj.mouseDownY;
    var tempRowIndex=(tempTop-tempTop%25)/25;
    if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=0;
    else tempRowIndex=tempRowIndex+obj.rowIndex;
    if(tempRowIndex>=obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
    obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
    obj.parentNode.insertBefore(obj,obj.nextSibling);obj = null;
    BindCheckBox();
    }
    }</SCRIPT><META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
    <BODY>
    <FORM id=form1 name=form1>
    <DIV>
    <TABLE cellSpacing=0 cellPadding=0 border=0>
      <TBODY>
      <TR>
        <TD>
          <TABLE id=HeaderTable cellSpacing=0 cellPadding=0 border=1>
            <TBODY>
            <TR bgcolor="gray">
              <TD align=center width=40>序号</TD>
              <TD align=center width=40>显示</TD>
              <TD align=center width=200>名称</TD>
              <TD align=center width=40>分组</TD>
              <TD align=center width=40>小计</TD>
              <TD align=center width=40>合计</TD></TR></TBODY></TABLE></TD>
    </TR>
      <TR>
        <TD>
          <TABLE id=ContentTable cellSpacing=0 cellPadding=0 border=1>
            <TBODY>
            <TR
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>0</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>数量</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)"
                name=checkGroup ></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>1</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>单价</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>2</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>产品名</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkSum></TD></TR>
            <TR   
            style="CURSOR: hand; POSITION: relative">
              <TD  width=40 bgcolor="gray" onmousedown='MouseDownToMove(this.parentElement)'>3</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                CHECKED name=checkDisplay></TD>
              <TD  width=200>已发货</TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroup></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkGroupSum></TD>
              <TD  width=40><INPUT  type=checkbox onclick="setState(this)" 
                name=checkSum></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </DIV>
    </FORM></BODY></HTML>