jquery調(diào)整表格行tr上下順序?qū)嵗v解
更新時(shí)間：2016年01月09日 18:55:06 作者：程序員小菜
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗哂幸欢ǖ膮⒖純r(jià)值，感興趣的朋友可以參考一下
表格是大家比較常用的元素，有時(shí)候表格中的行需要調(diào)整順序，下面就通過代碼實(shí)例介紹一下如何利用jquery實(shí)現(xiàn)此功能，分享給大家供大家參考，具體內(nèi)容如下
代碼實(shí)例如下:
<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>
以上代碼實(shí)現(xiàn)了我們的要求，代碼比較簡單，這里就不多介紹了。
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery源碼解讀之hasClass()方法,以注釋形式較為詳細(xì)的分析了hasClass()方法的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行，用js做游戲的也越來越多了，雖然現(xiàn)在html5出來了，但實(shí)際上要用html5做點(diǎn)啥出來還是得靠javascript，所以學(xué)好js是非常重要的2011-07-07
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用，而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項(xiàng)目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
jquery中獲得$.ajax()事件返回的值并添加事件的方法
如果想獲得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想獲得xx的值，要在script中，使用全局變量。利用全局變量引出xx的值。2010-04-04
這篇文章主要為大家詳細(xì)介紹了jquery一鍵控制checkbox全選、反選或全不選，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jquery easyui中treegrid用法的簡單實(shí)例
本篇文章主要是對jquery easyui中treegrid用法的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說明，非常的值得收藏。2011-04-04
jquery是javascript的類庫，提供了大量的javascript的類庫和API，方便javascript開發(fā)。2010-04-04
jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery插件zTree針對節(jié)點(diǎn)的遍歷與獲取操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
JavaScript為我們提供幾種對話框功能，但功能都十分有限；雖然在IE下可以通過模式窗體的方式創(chuàng)建更豐富的對話框功能，但畢竟只有IE得到支持。2008-06-06