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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
js中arguments对象的深入理解
May 14 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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
2009/06/29 PHP
php抓取https的内容的代码
2010/04/06 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Three.js实现简单3D房间布局
2018/12/30 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
毕业生就业自荐信
2013/12/04 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
异地恋情人节寄语
2015/02/28 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL