jQuery實現(xiàn)的調(diào)整表格行tr上下順序
更新時間：2016年01月10日 14:28:27 作者：程序員小菜
表格元素是大家比較常用的元素，有時候表格中的行需要調(diào)整順序，下面通過代碼實例介紹一下如何利用jquery實現(xiàn)此功能
表格是大家比較常用的元素，有時候表格中的行需要調(diào)整順序，下面就通過代碼實例介紹一下如何利用jquery實現(xiàn)此功能。
代碼實例如下:
<!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>
通過以上代碼簡單實現(xiàn)了jQuery實現(xiàn)的調(diào)整表格行tr上下順序，希望本段代碼可以幫助到大家。
相關文章
這篇文章主要介紹了jquery實現(xiàn)鼠標滑過小圖查看大圖的方法,涉及jquery鼠標事件及圖片樣式動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
Jquery+Ajax+PHP+MySQL實現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來實現(xiàn)一個客戶分類列表的管理，如何利用Ajax和Json技術讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下2015-10-10
JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實現(xiàn)代碼,代碼中包含詳細注釋,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery經(jīng)過一段時間自動隱藏指定元素的方法,實例分析了兩種比較常用的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章我們給大家整理了關于jQuery中常用動畫效果函數(shù)的相關知識點內(nèi)容，有興趣的朋友可以學習下。2018-08-08
本章節(jié)主要介紹了jQuery在HTML中動態(tài)插入節(jié)點的各種方法,制作成表格，方便大家對比學習，需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery grep()方法詳解及實例代碼的相關資料,需要的朋友可以參考下2016-10-10
這篇文章介紹了jQuery選擇器的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關技巧,需要的朋友可以參考下2016-06-06
JQueryEasyUI之DataGrid數(shù)據(jù)顯示
在有的項目中，為了方便將數(shù)據(jù)庫中的某些定值儲存為指定的數(shù)字，怎么處理這種問題呢？下面小編通過一段代碼給大家介紹下，需要的朋友參考下2016-11-11