jquery Implementation list Move up and down function _jquery

Less nonsense, we began to enter the subject.
Today we achieve a list page move up and down function. As shown in figure:

When you check the columns in the list, click Move Up or Move down to move up or down.
The HTML code is as follows:

<div> 
  <input type= button "onclick=" Up (); "Value=" Move Up "> 
  <input type=" button "onclick=" Down (); " Value= "Move Down" > 
</div> 
 <div> 
<table width= "400px" height= "" class= "MyTable" cellpadding= "5" cellspacing= "0" > 
<tr> 
 <td> serial number </td> 
 <td> name </td> 
  <td> gender </td> 
</tr> 
 <tr> 
 <td><input type= "checkbox" id= "C1"/>1 </td> 
 <td> Small one </td> 
  <td> men </td> 
</tr> 
 <tr> <td><input type= "checkbox" id= "C2"/>2</td> 
 <td> Small II </td> 
  <td> female </ td> 
</tr> 
<tr> 
 <td><input type= "checkbox" Id= "C3"/>3</td> 
 <td> </td> 
  <td> women </td> 
</tr> 
</table> 

We define a CSS style called MyTable

. mytable td,.mytable{ 
 font-size:12px; 
 color:red; 
 border:1px solid #000; 
 Text-align:center; 
 Border-collapse:collapse; 
 

And then implement up (), the Down () method is available, the code is as follows:

$.each ($ ("Table input:checked"), function () { 
  var onthis=$ (this). Parent (). parent (); 
  var getup=onthis.prev (); 
   
  if ($ (getUp). has ("input"). Size () ==0) 
  { 
   alert ("top element cannot move up"); 
   return; 
  } 
  $ (onthis). After (getUp);} 
 ); 
 function down () { 
 $.each ($ (' Table input:checked '), function () { 
  var onthis=$ (this). Parent (). parent (); 
  var getdown=onthis.next (); 
  $ (Getdown). After (onthis);} 
 ); 
 

Using the functions provided by jquery, the implementation is very simple, of course, if you want to achieve multiple columns at the same time move down, only need to add a loop can be, the core code is the top.

The above is the entire content of this article, I hope to learn from the jquery program to help.