前端：动态上移或下移 table表中的 td列 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title>JS控制HTMLDOM表格行上下移动</title>  
<style type="text/css">  
<!--  
td  { text-align:center;font-size:12px;padding:3px;}  
  
www.111cn.cn  
-->  
</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>

　　

posted @ 2018-04-10 15:32  桃源仙居  阅读(900)  评论(0)    收藏  举报