Home > Article > Web Front-end > jquery adjusts table row tr up and down order example explanation_jquery

jquery adjusts table row tr up and down order example explanation_jquery

WBOYOriginal: 2016-05-16 15:20:481523browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：bootstrap-treeview custom double-click event implementation method_javascript skillsNext article：bootstrap-treeview custom double-click event implementation method_javascript skills

See more

jquery adjusts table row tr up and down order example explanation_jquery

Related articles