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 相关文章推荐
JavaScript实现的日期控件具体代码
Nov 18 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
再谈JavaScript线程
Jul 10 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
js星星评分效果
2014/07/24 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
Vue实现简单的拖拽效果
2020/08/25 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python+selenium开发环境搭建图文教程
2017/08/11 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
如何获取某个日期是当月的最后一天
2013/12/05 面试题
思想汇报范文
2013/11/04 职场文书
高中军训感言500字
2014/02/24 职场文书
幼儿园招生广告
2014/03/19 职场文书
交通安全寄语大全
2014/04/08 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
搞笑结婚保证书
2015/05/08 职场文书
黄河绝恋观后感
2015/06/08 职场文书
班级联欢会主持词
2015/07/03 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
nginx.conf配置文件结构小结
2022/04/08 Servers