一个表格有多行,每一行中的单元格也有一个表格,效果是每个单元格中的表格可以点击前移(前移后,此单元格会被此单元格后面的单元格内容依次填充),后移,从A行移到B行单元格上(插入B行的单元格后,此单元格的内容依次往后移,最后一个单元格的内容自动移动到A行的最后一个单元格上)。

解决方案 »

  1.   

    效果是这样的:
            行A     a b c d e f
           行B    g h j k l m
    把行A中的b移动到e附近时,c,d,e依次会前移 结果为:
              行A     a c d e b f  
    把行A中的c移动到行B中k的附近时,结果为:
            行A     a b d e f m
           行B     g h j c k l 
      

  2.   

    这里面涉及的都是DOM操作
    建议楼主好好看看这方面的编程
      

  3.   

    js table row 上移,下移,置顶等移动
      

  4.   

    写了一个移动行的。移动列,原理差不多的。稍改一下就可以
    <!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 id='tb'>
    <tr>
        <td><table><tr><td>第1行的 表格</td></tr></table></td>
        <td> <input  type="button" value='前移'  cmd="p" />  <input  type="button" value='后移'  cmd="n" /> <input  type="button" value='置顶'  cmd="t" /><input  type="button" value='置底'  cmd="b" /></td>
    </tr>
    <tr>
        <td><table><tr><td>第2行的 表格</td></tr></table></td>
         <td> <input  type="button" value='前移'  cmd="p" />  <input  type="button" value='后移'  cmd="n" /> <input  type="button" value='置顶'  cmd="t" /><input  type="button" value='置底'  cmd="b" /></td>
    </tr>
    <tr>
        <td><table><tr><td>第3行的 表格</td></tr></table></td>
         <td> <input  type="button" value='前移'  cmd="p" />  <input  type="button" value='后移'  cmd="n" /> <input  type="button" value='置顶'  cmd="t" /><input  type="button" value='置底'  cmd="b" /></td>
    </tr>
    <tr>
        <td><table><tr><td>第4行的 表格</td></tr></table></td>
         <td> <input  type="button" value='前移'  cmd="p" />  <input  type="button" value='后移'  cmd="n" /> <input  type="button" value='置顶'  cmd="t" /><input  type="button" value='置底'  cmd="b" /></td>
    </tr>
    <tr>
        <td><table><tr><td>第5行的 表格</td></tr></table></td>
         <td> <input  type="button" value='前移'  cmd="p" />  <input  type="button" value='后移'  cmd="n" /> <input  type="button" value='置顶'  cmd="t" /><input  type="button" value='置底'  cmd="b" /></td>
    </tr>
    </table>
    </body>
    <script type="text/javascript">
    var tb;window.onload=function(){
        tb=document.getElementById("tb");
        for(var i=0;i<tb.rows.length;i++)
        {
            tb.rows[i].setAttribute('curIndex',i);
              (function(i){
                tb.rows[i].onclick = function(e){
                   e=e||event;
                    e = e.target || e.srcElement;
                    if(e=e.getAttribute("cmd"))
                    {
                       Swap(e,this.getAttribute("curIndex")); 
                    }  
                
                };
            
            })(i);
        }
    };
     
    function Swap(t,r)
    {
        
        r=parseInt(r);
        if(r==0 && (t=='t'|| t=='p') || r==tb.rows.length-1 && (t=="b" || t=="n") )
        {
            return;
        } 
        var arr=[];
       
        switch (t)
        {
            case 'p': // 前
           
             for(var i=0;i<r-1;i++)
            {
               arr.push(tb.rows[i]); 
            }
             arr.push(tb.rows[r]);  
             arr.push(tb.rows[r-1]); 
             for(var i=r+1;i<tb.rows.length;i++)
            {
               arr.push(tb.rows[i]); 
            }
            break;
            case 'n': // 后
              for(var i=0;i<r;i++)
            {
               arr.push(tb.rows[i]); 
            }
             arr.push(tb.rows[r+1]);  
             arr.push(tb.rows[r]); 
             for(var i=r+2;i<tb.rows.length;i++)
            {
               arr.push(tb.rows[i]); 
            }
             
            break;
            case 't': // 顶
             arr.push(tb.rows[r]);  
             for(var i=0;i<tb.rows.length;i++)
            {
               if(i!=r){arr.push(tb.rows[i])}; 
            } 
            break;
            case 'b': // 低
             for(var i=0;i<tb.rows.length;i++)
            {
               if(i!=r){arr.push(tb.rows[i])}; 
            } 
            arr.push(tb.rows[r]);  
            break;
        }
        var tbody = tb.getElementsByTagName('tbody')[0];
         while(tbody.hasChildNodes())
         {
              tbody.removeChild(tbody.lastChild);
          }
          for (var i = 0; i < arr.length; i++)
           {     
               tbody.appendChild(arr[i]);  
          }
        for(var i=0;i<tb.rows.length;i++)
        {
            tb.rows[i].setAttribute('curIndex',i);
        } 
    }
    </script></html>
      

  5.   

    楼主本身都完全没理清楚需求。
    点击前移后移下移上移???就一个点击,你知道往哪移? 
    从B移到E? 你每点一次移一次,每次都只是前后两个之间的事情,怎么又来了个N次间隔飞跃??岂不又变成任意跳,乾坤大挪移吗。
    到底是什么,想好没?
      

  6.   

    暂时不结贴先。      这个主要是拖动效果:就是
    效果是这样的:
      行A a b c d e f
      行B g h j k l m
    把行A中的b拖动到e附近时,c,d,e依次会前移 结果为:
      行A a c d e b f   
    把行A中的c拖动到行B中k的附近时,结果为:
      行A a b d e f m
      行B g h j c k l我自己做的方法是在jQuery 自己的文件里改写的    感觉不怎么好