JS实现的表格行上下移动操作示例

更新时间：2016年08月03日 12:21:39 作者：Quber

这篇文章主要介绍了JS实现的表格行上下移动操作,涉及javascript针对页面元素节点与属性的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现表格行上下移动操作的方法。分享给大家供大家参考，具体如下：

<!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>表格行移动</title>
</head>
<body>
<table width="200" border="1">
  <tbody>
    <tr>
      <td width="25%">1</td>
      <td width="25%">11</td>
      <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 type="text/javascript">
<!--
function moveUp(_a){
  var _row = _a.parentNode.parentNode;
  //如果不是第一行，则与上一行交换顺序
  var _node = _row.previousSibling;
  while(_node && _node.nodeType != 1){
    _node = _node.previousSibling;
  }
  if(_node){
    swapNode(_row,_node);
  }
}
function moveDown(_a){
  var _row = _a.parentNode.parentNode;
  //如果不是最后一行，则与下一行交换顺序
  var _node = _row.nextSibling;
  while(_node && _node.nodeType != 1){
    _node = _node.nextSibling;
  }
  if(_node){
    swapNode(_row,_node);
  }
}
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>

运行效果截图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

【经验总结】编写JavaScript代码时应遵循的14条规律
这篇文章主要介绍了编写JavaScript代码时应遵循的14条规律,涉及javascript变量的定义,函数、表单、json的使用,逻辑运算与页面元素操作技巧等,非常具有实用价值,需要的朋友可以参考下
2016-06-06
Jquery对数组的操作技巧整理
这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下
2014-03-03
js css+html实现简单的日历
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
倒记时60刷新网页的js代码
这篇文章主要介绍了倒记时60刷新网页的js代码,需要的朋友可以参考下
2014-02-02
TypeScript中Enum类型的具体使用
在TypeScript 中,枚举或枚举类型是具有一组常量值的常量长度的数据结构,本文主要介绍了TypeScript中Enum类型的具体使用,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
原生JS实现的双色球功能示例
这篇文章主要介绍了原生JS实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下
2018-02-02
JS实现数组扁平化的8种方式总结
数组扁平化指的是将一个多层嵌套的数组，处理成只有一层的数组，本文为大家整理了8个常用的JS实现数组扁平化的方法，希望对大家有所帮助
2023-08-08
js中的string.format函数代码
js中的string.format函数代码，学习js的朋友可以参考下。
2011-07-07
json对象与数组以及转换成js对象的简单实现方法
下面小编就为大家带来一篇json对象与数组以及转换成js对象的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
javascript如何计算数组中某值的出现次数
这篇文章主要介绍了javascript如何计算数组中某值的出现次数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01