页面上用表格显示一些内容,想在没一行的后边加一个向上的箭头用来控制此行的上升,以此调整显示顺序。上升到表格的最上面一行的时候箭头变灰,别的行的箭头都显示可以调整的状态,各位大虾怎么做啊??????谢谢各位了

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Table test</title>
    <style type="text/css">
    <!--
    td  { text-align:center;font-size:12px;padding:3px;}
    -->
    </style>
    </head>
    <body>
    <table id="table1" bordercolor="#000000" width="200" border="1">
        <tbody>
            <tr>
                <td width="25%">1</td>
                <td width="25%">11</td>
       <!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
                <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>22</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>33</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>44</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>55</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
            </tr>
        </tbody>
    </table>
    </body>
    </html><script language="JavaScript" type="text/javascript">
    <!--
    function cleanWhitespace(element) {
     //遍历element的子结点
     for (var i = 0; i < element.childNodes.length; i++) {
      var node = element.childNodes[i];
      //判断是否是空白文本结点,如果是,则删除该结点
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
      node.parentNode.removeChild(node);
     }
    }
    //获得表格对象
    var _table=document.getElementById("table1");
    cleanWhitespace(_table);
    //使表格行上移,接收参数为链接对象
    function moveUp(_a){
     //通过链接对象获取表格行的引用
     var _row=_a.parentNode.parentNode;
     //如果不是第一行,则与上一行交换顺序
     if(_row.previousSibling)swapNode(_row,_row.previousSibling);
    }
    //使表格行下移,接收参数为链接对象
    function moveDown(_a){
     //通过链接对象获取表格行的引用
     var _row=_a.parentNode.parentNode;
     //如果不是最后一行,则与下一行交换顺序
     if(_row.nextSibling)swapNode(_row,_row.nextSibling);
    }
    //定义通用的函数交换两个结点的位置
    function swapNode(node1,node2){
     //获取父结点
     var _parent=node1.parentNode;
     //获取两个结点的相对位置
     var _t1=node1.nextSibling;
     var _t2=node2.nextSibling;
     //将node2插入到原来node1的位置
     if(_t1)_parent.insertBefore(node2,_t1);
     else _parent.appendChild(node2);
     //将node1插入到原来node2的位置
     if(_t2)_parent.insertBefore(node1,_t2);
     else _parent.appendChild(node1);
    }
    //-->
    </script>
    差不多的一个例子 自己再改改