jQuery implements the adjustment of table row tr up and down order

2020-12-05 17:05:31
OfStack

Table is a common element, and sometimes the rows in the table need to be reordered. The following code example shows how to use jquery to achieve this function.

Code examples are as follows:


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

Through the above code to achieve simple jQuery tr adjustment table line up and down order, I hope this code can help you.