jQuery實(shí)現(xiàn)的調(diào)整表格行tr上下順序
更新時(shí)間：2016年01月10日 14:28:27 作者：程序員小菜
表格元素是大家比較常用的元素，有時(shí)候表格中的行需要調(diào)整順序，下面通過代碼實(shí)例介紹一下如何利用jquery實(shí)現(xiàn)此功能
表格是大家比較常用的元素，有時(shí)候表格中的行需要調(diào)整順序，下面就通過代碼實(shí)例介紹一下如何利用jquery實(shí)現(xiàn)此功能。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>腳本之家</title>
<style type="text/css" >
table
{
background:#F90;
width:400px;
line-height:20px;
}
td
{
border-right:1px solid gray;
border-bottom:1px solid gray;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></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>腳本之家一</td>
<td>腳本之家一</td>
<td>腳本之家一</td>
<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
</tr>
<tr>
<td>腳本之家二</td>
<td>腳本之家二</td>
<td>腳本之家二</td>
<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
</tr>
<tr>
<td>腳本之家三</td>
<td>腳本之家三</td>
<td>腳本之家三</td>
<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
</tr>
<tr>
<td>腳本之家四</td>
<td>腳本之家四</td>
<td>腳本之家四</td>
<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
</tr>
<tr>
<td>腳本之家五</td>
<td>腳本之家五</td>
<td>腳本之家五</td>
<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
</tr>
</table>
</body>
</html>
通過以上代碼簡(jiǎn)單實(shí)現(xiàn)了jQuery實(shí)現(xiàn)的調(diào)整表格行tr上下順序，希望本段代碼可以幫助到大家。
相關(guān)文章
jquery實(shí)現(xiàn)鼠標(biāo)滑過小圖查看大圖的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過小圖查看大圖的方法,涉及jquery鼠標(biāo)事件及圖片樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來實(shí)現(xiàn)一個(gè)客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下2015-10-10
JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-06-06
jQuery經(jīng)過一段時(shí)間自動(dòng)隱藏指定元素的方法
這篇文章主要介紹了jQuery經(jīng)過一段時(shí)間自動(dòng)隱藏指定元素的方法,實(shí)例分析了兩種比較常用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery中常用動(dòng)畫效果函數(shù)知識(shí)點(diǎn)整理
這篇文章我們給大家整理了關(guān)于jQuery中常用動(dòng)畫效果函數(shù)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以學(xué)習(xí)下。2018-08-08
本章節(jié)主要介紹了jQuery在HTML中動(dòng)態(tài)插入節(jié)點(diǎn)的各種方法,制作成表格，方便大家對(duì)比學(xué)習(xí)，需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery grep()方法詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章介紹了jQuery選擇器的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06
JQueryEasyUI之DataGrid數(shù)據(jù)顯示
在有的項(xiàng)目中，為了方便將數(shù)據(jù)庫中的某些定值儲(chǔ)存為指定的數(shù)字，怎么處理這種問題呢？下面小編通過一段代碼給大家介紹下，需要的朋友參考下2016-11-11