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 继承机制实例
Aug 12 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
javascript 实现 原路返回
Jan 21 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Webpack性能优化 DLL 用法详解
Aug 10 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php split汉字
2009/06/05 PHP
PHP 面向对象详解
2012/09/13 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
js仿淘宝放大镜效果
2020/12/28 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python中实现的RC4算法
2015/02/14 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python画图的函数用法以及技巧
2019/06/28 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
小结Python的反射机制
2020/09/28 Python
Django url 路由匹配过程详解
2021/01/22 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android