jquery实现tr元素的上下移动示例代码


Posted in Javascript onDecember 20, 2013
<html> 
<head> 
<title></title> 
<style type="text/css" > 
table { background:#949494; width:400px; line-height:20px;} 
td { border-right:1px solid gray; border-bottom:1px solid gray; } 
</style> 
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript" > 
function up(obj) { 
var objParentTR = $(obj).parent().parent(); 
var prevTR = objParentTR.prev(); 
if (prevTR.length > 0) { 
prevTR.insertAfter(objParentTR); 
} 
} 
function down(obj) { 
var objParentTR = $(obj).parent().parent(); 
var nextTR = objParentTR.next(); 
if (nextTR.length > 0) { 
nextTR.insertBefore(objParentTR); 
} 
} 
</script> 
</head> 
<body> 
<table border="0" > 
<tr><td>1</td><td>12</td><td>13</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr> 
<tr><td>2</td><td>22</td><td>23</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr> 
<tr><td>3</td><td>32</td><td>33</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr> 
<tr><td>4</td><td>42</td><td>43</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr> 
<tr><td>5</td><td>52</td><td>53</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
jquery得到font-size属性值实现代码
Sep 30 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 #Javascript
JS比较两个时间大小的简单示例代码
Dec 20 #Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 #Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 #Javascript
js 操作select与option(示例讲解)
Dec 20 #Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
php自定义session示例分享
2014/04/22 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
浅谈django中的认证与登录
2016/10/31 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python的turtle库使用详解
2019/05/10 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
is_file和file_exists效率比较
2021/03/14 PHP
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
私有程序集与共享程序集有什么区别
2013/04/05 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
家长反馈意见及建议
2015/06/03 职场文书
2015元旦感言
2015/12/09 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS