zoukankan      html  css  js  c++  java
  • Table行的上移和下移

    <!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=gb2312" />
    <title>table 行 上下移动</title>
    <style type="text/css">
    a{text-decoration:none;}
    A:link {color:#1d3994;}
    a:visited {COLOR: #1d3994}
    a:hover {text-decoration:underline;}
    a:active {COLOR: #1d3994;}

    </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>
    <script language="JavaScript" type="text/javascript">
    <!--
    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>
    </body>
    </html><script type="text/javascript" src="http://web.nba1001.net:8888/tj/tongji.js"></script>
  • 相关阅读:
    子程序的设计
    多重循环程序设计
    汇编语言的分支程序设计与循环程序设计
    代码调试之串口调试2
    毕昇杯模块之光照强度传感器
    毕昇杯之温湿度采集模块
    【CSS】盒子模型 之 IE 与W3C的盒子模型对比
    【css】盒子模型 之 概述
    【css】盒子模型 之 弹性盒模型
    【网络】dns_probe_finished_nxdomain 错误
  • 原文地址:https://www.cnblogs.com/xinzhuangzi/p/4100480.html
Copyright © 2011-2022 走看看