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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
基于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
第五节--克隆
2006/11/16 PHP
php 图片上传类代码
2009/07/17 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python生成词云的实现代码
2020/01/14 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
干部现实表现材料
2014/02/13 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js