jQuery realizes table row moving up and down and top effect_jquery

When we operate list data, we need to adjust the order of data rows, such as moving rows up and down, moving row data to the top, etc. These operations can be completed by clicking buttons on the front end, and are accompanied by simple dynamics Effectively, it is easy to sort table data.

HTML

The page is a simple data table. We place three links "Move Up", "Move Down" and "Top" in the data row, and define three class attributes respectively. Let's implement these through jQuery operate.

 
<table class="table"> 
  <tr> 
    <td>HTML5获取地理位置定位信息</td> 
    <td>2015-04-25</td> 
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td> 
  </tr> 
  <tr> 
    <td>CSS+Cookie实现的固定页脚广告条置顶</a></td> 
  </tr> 
  ... 
</table> 

jQuery

We need to load the jQuery library file in advance, and then bind the click events for the three operations of move up, move down and top respectively. Take "Move Up" as an example. When clicked, obtain the content of the currently clicked row and tr, and then determine whether the row is the first row. If it is not the first row, then insert the row in front of the previous row. The purpose of exchange is achieved. Of course, we can add fadeOut() and fadeIn() transition effects to the row, which will look more vivid, otherwise the upward movement will pass by in a flash. The operation processes of "move down" and "top" are similar, please see the code:

 
$(function(){ 
  //上移 
  var $up = $(".up") 
  $up.click(function() { 
    var $tr = $(this).parents("tr"); 
    if ($tr.index() != 0) { 
      $tr.fadeOut().fadeIn(); 
      $tr.prev().before($tr); 
       
    } 
  }); 
  //下移 
  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); 
    } 
  }); 
  //置顶 
  var $top = $(".top"); 
  $top.click(function(){ 
    var $tr = $(this).parents("tr"); 
    $tr.fadeOut().fadeIn(); 
    $(".table").prepend($tr); 
    $tr.css("color","#f60"); 
  }); 
}); 

Of course, in actual applications, your project should be combined. When the operations "move up", "move down" and "top" are completed, Ajax asynchronous interaction should be performed with the background program to ensure that the sorted data is actually recorded in the background, and then After refreshing, the new sorting results will be displayed. This article will not explain the asynchronous operation in detail and will end here.

The above is the entire content of this article. I hope it will be helpful to everyone learning jQuery.