快捷導(dǎo)航

jquery調(diào)整表格行tr上下順序?qū)嵗v解

更新時間：2016年01月09日 18:55:06 作者：程序員小菜

這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗哂幸欢ǖ膮⒖純r值，感興趣的朋友可以參考一下

表格是大家比較常用的元素，有時候表格中的行需要調(diào)整順序，下面就通過代碼實例介紹一下如何利用jquery實現(xiàn)此功能，分享給大家供大家參考，具體內(nèi)容如下
代碼實例如下:

<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)了我們的要求，代碼比較簡單，這里就不多介紹了。

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: