编程 Javascript

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 相关文章推荐

兼容Mozilla必须知道的知识。

Jan 09 Javascript

js函数的延迟加载实现代码

Oct 11 Javascript

js控制frameSet示例

Sep 10 Javascript

js创建元素（节点）示例

Jan 02 Javascript

select多选 multiple的使用示例

Jun 16 Javascript

js实现商城星星评分的效果

Dec 29 Javascript

jQuery.form插件的使用及跨域异步上传文件

Apr 27 Javascript

jQuery通过ajax方法获取json数据不执行success的原因及解决方法

Oct 15 Javascript

jquery利用json实现页面之间传值的实例解析

Dec 12 Javascript

JS实现标签页切换效果

May 04 Javascript

vue 单页应用和多页应用的优劣

Oct 22 Javascript

jQuery实现影院选座订座效果

Apr 13 jQuery

解决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