快捷導(dǎo)航

jquery實(shí)現(xiàn)tr元素的上下移動(dòng)示例代碼

更新時(shí)間：2013年12月20日 14:54:04 作者：

讓tr元素的上下移動(dòng)的方法有很多，本文為大家介紹下使用jquery是實(shí)現(xiàn)的，感興趣的朋友可以參考下

 
<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="#" onclick="down(this)">下移</a></td></tr> 
</table> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁換膚效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換操作技巧,需要的朋友可以參考下
2016-09-09
jquery增加時(shí)編輯jqGrid(實(shí)例代碼)
jquery增加時(shí)編輯jqGrid(實(shí)例代碼)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼
這篇文章主要介紹了jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例
這篇文章主要介紹了jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例,需要的朋友可以參考下
2014-05-05
jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery：UI 項(xiàng)目中，我介紹了使用 jQuery 代碼中的插件來提高 web 應(yīng)用程序的效率。
2010-06-06
JQuery 學(xué)習(xí)筆記選擇器之四
以下是測(cè)試?yán)?，這邊測(cè)試?yán)硬辉傧裰皫渍乱燥@示HTML與ID的方式來查看結(jié)果，換以改變紅色背景顏色來查看，應(yīng)該會(huì)更直觀點(diǎn)吧^^
2009-07-07
jQuery 打造動(dòng)態(tài)漸變按鈕詳細(xì)圖文教程
這是寫給web設(shè)計(jì)者和前端開發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動(dòng)態(tài)漸變效果。
2010-04-04
jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果,涉及jQuery中鼠標(biāo)事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
jQuery中判斷對(duì)象是否存在的方法匯總
本文給大家匯總了下在jQuery中判斷對(duì)象是否存在的方法以及用原生javascript實(shí)現(xiàn)的方法，有相同需求的小伙伴可以來參考下。
2016-02-02
jquery對(duì)象與DOM對(duì)象轉(zhuǎn)化
本文主要介紹了jquery對(duì)象與DOM對(duì)象轉(zhuǎn)化方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02