信鸽网

jquery调整表格行tr上下顺序实例讲解

  作者：bea

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能，分享给大家供大家参考，具体内容如下 代码实例如下: <html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><sty

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能，分享给大家供大家参考，具体内容如下
代码实例如下:




<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>


以上代码实现了我们的要求，代码比较简单，这里就不多介绍了。


希望本文所述对大家学习javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: