jquery實(shí)現(xiàn)tr元素的上下移動示例代碼
更新時間：2013年12月20日 14:54:04 作者：
讓tr元素的上下移動的方法有很多，本文為大家介紹下使用jquery是實(shí)現(xiàn)的，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jQuery移動和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery拖動div、移動div、彈出層實(shí)現(xiàn)原理及示例
- 基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實(shí)現(xiàn)代碼（帶平滑移動的效果）
- jQuery 移動端artEditor富文本編輯器
- jQuery插件實(shí)現(xiàn)適用于移動端的地址選擇器
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效
- jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實(shí)現(xiàn)
- jquery使用animate方法實(shí)現(xiàn)控制元素移動
- 基于jquery實(shí)現(xiàn)左右上下移動效果
相關(guān)文章
jQuery實(shí)現(xiàn)簡單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下2016-09-09
jquery增加時編輯jqGrid(實(shí)例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼
這篇文章主要介紹了jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下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 項目中，我介紹了使用 jQuery 代碼中的插件來提高 web 應(yīng)用程序的效率。2010-06-06
以下是測試?yán)樱@邊測試?yán)硬辉傧裰皫渍乱燥@示HTML與ID的方式來查看結(jié)果，換以改變紅色背景顏色來查看，應(yīng)該會更直觀點(diǎn)吧^^2009-07-07
jQuery 打造動態(tài)漸變按鈕 詳細(xì)圖文教程
這是寫給web設(shè)計者和前端開發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動態(tài)漸變效果。2010-04-04
jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動效果,涉及jQuery中鼠標(biāo)事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
本文給大家匯總了下在jQuery中判斷對象是否存在的方法以及用原生javascript實(shí)現(xiàn)的方法，有相同需求的小伙伴可以來參考下。2016-02-02
本文主要介紹了jquery對象與DOM對象轉(zhuǎn)化方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02