如何交换DOM元素位置？

<table>
    <tr><td>A</td><td>name</td><td>detail</td></tr>
   <tr><td>B</td><td>name</td><td>detail</td></tr>
</table>如题，用JS 如何把 A行 移动到 B行的下方？

解决方案 »

  1.   

    要定义临时行才行var tr=document.createElement("tr")
     这样
      
      类似排序
      

  2.   

    问题补充下：
    如果只移动一行，还好处理，但是如果要移动多行的话就比较麻烦。
    例如
    <table>
      <tr><td>A</td><td>name</td><td>detail</td></tr>
      <tr><td>A.1</td><td>name</td><td>detail</td></tr>
      <tr><td>A.2</td><td>name</td><td>detail</td></tr>  <tr><td>B</td><td>name</td><td>detail</td></tr>
      <tr><td>B.1</td><td>name</td><td>detail</td></tr>
      <tr><td>B.2</td><td>name</td><td>detail</td></tr>  <tr><td>C</td><td>name</td><td>detail</td></tr>
      <tr><td>C.1</td><td>name</td><td>detail</td></tr>
      <tr><td>C.2</td><td>name</td><td>detail</td></tr>
    </table>如果是 互换 A类行 和 B类行 这种多行移动 又如何处理？ 
      

  3.   

    <html>
    <head>
    <script type="text/javascript">
    function exchange() {
    var tb = document.getElementById("tb");
    var tr = tb.rows[0];
    tb.tBodies[0].appendChild(tr);
    }
    </script>
    </head>
    <body>
    <table id="tb">
      <tr><td>A</td><td>name</td><td>detail</td></tr>
      <tr><td>B</td><td>name</td><td>detail</td></tr>
    </table>
    <button onclick="exchange()">Exchange</button>
    </body>
    </html>
      

  4.   

    ++
    这样就可以了,既然是移动,不用create
      

  5.   

    <html>
    <head>
    <script type="text/javascript">
    var currentNum = 1;
    function up() {
    if (currentNum > 0) {
    var tb = document.getElementById("tb");
    var currentRow = tb.rows[currentNum];
    var tr = tb.insertRow(--currentNum);
    var len = currentRow.cells.length;
    for (var i = 0; i < len; i++) {
    tr.appendChild(currentRow.cells[0]);
    }
    tb.tBodies[0].removeChild(currentRow);
    tr.style.backgroundColor = "blue";
    tr.style.color = "white";
    }
    }
    function down() {
    var tb = document.getElementById("tb");
    var rowLength = tb.rows.length;
    if (currentNum < rowLength - 1) {
    var currentRow = tb.rows[currentNum];
    var tr = tb.insertRow(currentNum + 2);
    var len = currentRow.cells.length;
    for (var i = 0; i < len; i++) {
    tr.appendChild(currentRow.cells[0]);
    }
    tb.tBodies[0].removeChild(currentRow);
    tr.style.backgroundColor = "blue";
    tr.style.color = "white";
    currentNum++;
    }
    }
    </script>
    </head>
    <body>
    <table id="tb">
      <tr><td>A</td><td>name</td><td>detail</td></tr>
      <tr style="background-color:blue; color: white;"><td>B</td><td>name</td><td>detail</td></tr>
      <tr><td>C</td><td>name</td><td>detail</td></tr>
      <tr><td>D</td><td>name</td><td>detail</td></tr>
      <tr><td>E</td><td>name</td><td>detail</td></tr>
    </table>
    <button onclick="up()">&nbsp;Up&nbsp;</button>
    <button onclick="down()">Down</button>
    </body>
    </html>
      

  6.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
    //beginRow:要移动的起始行位置 ，如:要从第一行开始移动，则为1  
    //endRow,要移动的起始行位置
    //nsertRow,插入行的位置
    //type:0为在nsertRow之前插入，1为在nsertRow之后插入
    function moveRows(tableid,beginRow,endRow,insertRow,type){
    var oTable=document.getElementById(tableid);
    //存放行的数组
    var aTrs=[];

    if(oTable){
    //存放插入行的引用
    var iRow=oTable.tBodies[0].rows[insertRow-1];
    for(var i=beginRow-1;i<endRow;i++){
    aTrs.push(oTable.tBodies[0].rows[i])
    }
    //创建文档碎片
    var oFragment=document.createDocumentFragment();
    for(var j=0;j<aTrs.length;j++){
    oFragment.appendChild(aTrs[j])
    }
    if(type==0)
    oTable.tBodies[0].insertBefore(oFragment,iRow);
    else
    oTable.tBodies[0].insertBefore(oFragment,iRow.nextSibling);
    }
    else{
    alert('id错误');
    }
    }
    </script>
    </head>
    <body>
    <table id="tb">
    <tr><td>A</td><td>name</td><td>detail</td></tr>
    <tr><td>B</td><td>name</td><td>detail</td></tr>
    <tr><td>C</td><td>name</td><td>detail</td></tr>
    <tr><td>D</td><td>name</td><td>detail</td></tr>
    <tr><td>E</td><td>name</td><td>detail</td></tr>
    <tr><td>F</td><td>name</td><td>detail</td></tr>
        </table>
    <input type="button"  value="将第二至第四行移动到第六行前" onclick="moveRows('tb',2,3,6,1)"/>
    </body></html>
      

  7.   

    晕 刚才昨晚测试 忘记把字改回来了 那个button改一下<input type="button"  value="将第二至第3行移动到第六行前" onclick="moveRows('tb',2,3,6,0)"/>
      

  8.   

    还有一个条件没做判断 起始行>0&&结束行>0&&插入行>0&&起始行<结束行&&结束行<=整个table的行数插入行 <起始行|| (插入行>结束行 &&插入行<整个table的行数)