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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
纯JS实现轮播图
Feb 22 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
vue实现表格合并功能
Dec 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
PHP 时间日期操作实战
2011/08/26 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jquery等待效果示例
2014/05/01 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS之相等操作符详解
2016/09/13 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
办理护照工作证明
2014/10/10 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
如何利用python创作字符画
2022/06/25 Python