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


Posted in Javascript onAugust 03, 2016

本文实例讲述了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>

运行效果截图如下:

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

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

Javascript 相关文章推荐
JS判断不能为空实例代码
Nov 26 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 #Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 #Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 #Javascript
JS简单实现点击复制链接的方法
Aug 03 #Javascript
JS清除字符串中重复值的实现方法
Aug 03 #Javascript
JS使用onerror捕获异常示例
Aug 03 #Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php缓冲输出实例分析
2015/01/05 PHP
php获取图片信息的方法详解
2015/12/10 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
详解Python中列表和元祖的使用方法
2015/04/25 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
优秀班干部事迹材料
2014/01/26 职场文书
创新型城市实施方案
2014/03/06 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
支教个人总结
2015/03/04 职场文书
高考升学宴主持词
2019/06/21 职场文书
React配置子路由的实现
2021/06/03 Javascript
MongoDB数据库之添删改查
2022/04/26 MongoDB