jquery實現(xiàn)tr元素的上下移動示例代碼
更新時間：2013年12月20日 14:54:04 作者：
讓tr元素的上下移動的方法有很多，本文為大家介紹下使用jquery是實現(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> <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移動和復制dom節(jié)點實用DOM操作案例
- jQuery拖動div、移動div、彈出層實現(xiàn)原理及示例
- 基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼（帶平滑移動的效果）
- jQuery 移動端artEditor富文本編輯器
- jQuery插件實現(xiàn)適用于移動端的地址選擇器
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn)
- jquery使用animate方法實現(xiàn)控制元素移動
- 基于jquery實現(xiàn)左右上下移動效果
相關文章
JQuery UI的拖拽功能實現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動畫、特效等API，并且封裝了一些Web小部件（Widget）。同時，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能2012-03-03
jQuery中closest和parents的區(qū)別分析
本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹，在jquery中parents()查找父級元素刪除的時候，發(fā)現(xiàn)它不包含根元素，于是用了closest()，效果不錯，下面我來給大家具體的介紹一下2015-05-05
當我們點擊表格里面的標題顯示相關的詳細信息，比如點擊新聞標題顯示正文，而正文通常是在一個頁面里面，通過獲取傳遞的參數(shù)id查詢數(shù)據(jù)庫，然后顯示出來2011-11-11
提示浮層跟隨鼠標移動(jquery版)2010-02-02
jQuery 實現(xiàn)自動填充郵箱功能（帶下拉提示）
本文用 jQuery 實現(xiàn)一個用戶輸入字符時出現(xiàn)能夠提示郵箱后綴名的下拉菜單，并且在選擇下拉菜單中的郵箱后綴名后可自動填充未完成的輸入框。2014-10-10
jQuery基礎的工廠函數(shù)以及定時器的經(jīng)典實例分析
下面小編就為大家?guī)硪黄猨Query基礎的工廠函數(shù)以及定時器的經(jīng)典實例分析。小編覺得挺不錯的，現(xiàn)在2016-05-05
jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數(shù)進行實時數(shù)學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)輪播圖及其原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要給大家介紹了關于jquery兩種導入方式之本地導入和線上導入的相關資料,jQuery是一款JavaScript庫,封裝了JavaScript相關方法調(diào)用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
jquery動態(tài)增加text元素以及刪除文本內(nèi)容實例代碼
這段代碼是通過jquery動態(tài)增加限定數(shù)額的text，以及清除文本內(nèi)容，用到了after()方法追加元素，具體實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07