jquery adjusts table row tr up and down order example explanation

jquery adjusts table row tr up and down order example explanation_jquery

WBOY

Release： 2016-05-16 15:20:48

Original

1563 people have browsed it

Table is a commonly used element. Sometimes the order of rows in the table needs to be adjusted. Here is a code example to introduce how to use jquery to implement this function and share it with you for your reference. The specific content is as follows
The code example is as follows:

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

Copy after login

The above code achieves our requirements. The code is relatively simple and will not be introduced here.

I hope this article will be helpful to everyone learning JavaScript programming.