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 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
基于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
支持oicq头像的留言簿(二)
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP数字格式化
2006/12/06 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python实现统计代码行数的方法
2015/05/22 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
期末自我鉴定
2014/02/02 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
孙振耀退休感言
2015/08/01 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
vue实现简易音乐播放器
2022/08/14 Vue.js