jquery implements table row up and down movement and top effect _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.

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> 
  ... 
</table> 

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" complete, should and background program Ajax asynchronous interaction, to ensure that the sort of 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, this knot.

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