请教一个DOM节点的问题


<table width="500" border="0" cellpadding="0" cellspacing="10">
    <tr>
  <td height="48"><a href="javascript:void(0);" onclick="moveUp(this)">up</a></td></tr>
    <tr>
      <td height="5">间隔</td></tr>
<tr>
  <td height="48"><a href="javascript:void(0);" onclick="moveUp(this)">up</a></td></tr>
    <tr>
      <td height="5">间隔</td></tr>
</table>
以上代码需要实现行上下移动，移动需要    <tr>
  <td height="48"><a href="javascript:void(0);" onclick="moveUp(this)">up</a></td></tr>
    <tr>
      <td height="5">间隔</td></tr>这个节点和下面的节点替换，但是moveUp函数取的是当前行，也就是
<tr>
  <td height="48"><a href="javascript:void(0);" onclick="moveUp(this)">up</a></td></tr>
问题就出现了， 对当前行的移动无法对间隔行的，我现在的想法是合并节点，然后移动，但是不行。还有个方法是不用间隔行，给TR增加margin，但是无效。请教各位高手，应该怎样操作好，谢谢

解决方案 »

  1.   

    节点是dom模型的概念，我这里说的节点是一个tr行的内容。
    移动就是行与行之间的移动。
    我现在问题就在于，中间多了一个间隔行，移动就麻烦了
      

  2.   

    要移动的和相邻的间隔的tr的id或者name弄成一样，再试试
      

  3.   

    <html>
    <head>
    <title></title>
    <script type="text/javascript">function moveUp(obj){
        var tbody = document.getElementById('t1').tBodies[0];
        var td = obj.parentNode;
        var tr = obj.parentNode.parentNode;
    var trIndex = tr.rowIndex;
    if(trIndex == 0){
    alert('已在最顶端');
    }else{
    var nextTR = tbody.rows[trIndex+1];
    var toTR = tbody.rows[trIndex-2];
    tbody.insertBefore(tr,toTR);
    tbody.insertBefore(nextTR,toTR);
    }
    }
       
    </script>
    </head>
    <body>
    <table width="500" border="0" cellpadding="0" cellspacing="10" id="t1">
    <tr>
    <td height="48">
    <a href="javascript:void(0);" onclick="moveUp(this)">up1</a>
    </td>
    </tr>
    <tr>
    <td height="5">
    间隔1
    </td>
    </tr> <tr>
    <td height="48">
    <a href="javascript:void(0);" onclick="moveUp(this)">up2</a>
    </td>
    </tr>
    <tr>
    <td height="5">
    间隔2
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  4.   


    <html>
        <head>
            <title></title>
            <script type="text/javascript">function moveUp(obj){
        var tbody = document.getElementById('t1').tBodies[0];
       // var td = obj.parentNode;
        var tr = obj.parentNode.parentNode;
    //console.log(obj.parentNode);
        var trIndex = tr.rowIndex;
    alert(trIndex);
        if(trIndex == 0){
            alert('已在最顶端');
        }else{
            var nextTR = tbody.rows[trIndex-1];
            var toTR = tbody.rows[trIndex+1];
            tbody.insertBefore(nextTR,toTR);
            //tbody.insertBefore(nextTR,toTR);
        }
    }
       
    </script>
        </head>
        <body>
            <table  border="4px solid red" id="t1">
                <tr>
                    <td height="48">
                        <a href="javascript:void(0);" onclick="moveUp(this)">up1</a>
                    </td>
                    <td height="5">
                        间隔1
                    </td>
                </tr>            <tr>
                    <td height="48">
                        <a href="javascript:void(0);" onclick="moveUp(this)">up2</a>
                    </td>
                    <td height="5">
                        间隔2
                    </td>
                </tr>
                <tr>
                    <td height="48">
                        <a href="javascript:void(0);" onclick="moveUp(this)">up3</a>
                    </td>
                    <td height="5">
                        间隔3
                    </td>
                </tr>
            </table>
        </body>
    </html>点击和上一行交换