jquery adjusts table rows tr up and down sequential example illustration

2020-11-25 07:09:29
OfStack

Table is a commonly used element, sometimes the rows in the table need to adjust the order, the following code example to introduce how to use jquery to achieve this function, to share for your reference, the specific content is as follows
Code examples are as follows:


<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> The ant tribe </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> The home of the script </td>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td><a href="#" onclick="up(this)"> Move up </a> <a href="#" onclick="down(this)"> Move down </a></td>
 </tr>
 <tr>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td><a href="#" onclick="up(this)"> Move up </a> <a href="#" onclick="down(this)"> Move down </a></td>
 </tr>
 <tr>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td><a href="#" onclick="up(this)"> Move up </a> <a href="#" onclick="down(this)"> Move down </a></td>
 </tr>
 <tr>
  <<td> The home of the script </td>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td><a href="#" onclick="up(this)"> Move up </a> <a href="#" onclick="down(this)"> Move down </a></td>
 </tr>
 <tr>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td> The home of the script </td>
  <td><a href="#" onclick="up(this)"> Move up </a> <a href="#" onclick="down(this)"> Move down </a></td>
 </tr>
</table>
</body>
</html>

Above code to achieve our requirements, the code is relatively simple, here is not introduced.

I hope this article has been helpful in learning javascript programming.