jquery table row Move down and top implementation method _jquery

In the operation of the list data, we need to adjust the order of data rows, such as up and down transitions, the row of data, such as the top, these operations can be done by clicking on the front button, and with a simple dynamic effect, easy to implement tabular data sorting.

Run Effect chart:

Html
On the page is a simple data table, we place in the data row "up", "Move Down" and "top" three links, and define the three class attributes, we can implement these operations through jquery.

<table class= "Table" > 
 <tr> 
  <td>html5 Get location information </td> 
  <td>2015-04-25 </td> 
  <td><a href= "#" class= "Up" > Move </a> <a href= "#" class= "Down" > Down-Shift </a> < A href= "#" class= "Top" > Top </a></td> 
 </tr> 
 <tr> 
  <td>css+ Cookie implementation of the fixed footer banner </a></td> 
 </tr> 
 ... 

Jquery
We need to load the jquery library files in advance, and then bind the click events up, down, and up to three actions separately. Take "Up" as an example, when clicked, get the current click of the line, and TR, and then determine whether the row is the first row, if not the first row, then insert the row in front of the previous line to achieve the purpose of the interchange. Of course we can add fadeout () and Fadein () transitions to the rows, which will look more vivid, otherwise the move up process will flash. The "Move Down" and "top" operating procedures are similar, see Code:

$ (function () { 
 //move 
 var $up = $ ('. Up ') 
 $up. Click (function () { 
  var $tr = $ (this). Parents ("tr"); 
  if ($tr. Index ()!= 0) { 
   $tr. fadeout (). FadeIn (); 
   $tr. Prev (). before ($TR); 
    
  } 
 }); 
 Move the 
 var $down = $ (". Down"); 
 var len = $down. length; 
 $down. Click (function () { 
  var $tr = $ (this). Parents ("tr"); 
  if ($tr. Index ()!= len-1) { 
   $tr. fadeout (). FadeIn (); 
   $tr. Next () after ($TR); 
  } 
 }; 
 Top-up 
 var $top = $ (". Top"); 
 $top. Click (function () { 
  var $tr = $ (this). Parents ("tr"); 
  $tr. fadeout (). FadeIn (); 
  $ (". Table"). Prepend ($TR); 
  $tr. CSS ("Color", "#f60"); 
  

Of course, the actual application should be combined with your project, in the operation "Move Up", "Move Down" and "top" completion, should be with the background program Ajax asynchronous interaction, to ensure that the sort data is really background records, and then refresh will show the new sorting results, this article no longer the asynchronous operation to do detailed explanation.