用javascript实现行的上下移动

最新推荐文章于 2023-10-07 16:10:34 发布

sunxboy

最新推荐文章于 2023-10-07 16:10:34 发布

阅读量731

点赞数 1

分类专栏： WEB技术文章标签： JavaScript CSS HTML ViewUI

WEB技术专栏收录该内容

127 篇文章 0 订阅

订阅专栏

<!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)" οnclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>22</td>
            <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>33</td>
            <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>44</td>
            <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>55</td>
            <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" οnclick="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>

sunxboy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用javascript实现行的上下移动

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Table test&lt;/title&gt;&lt;style type="text/css"&gt;&lt;!--td { text-al
复制链接

扫一扫

专栏目录