jQuery réalise une ligne de tableau se déplaçant de haut en bas et en haut effect_jquery

Lorsque nous exploitons des données de liste, nous devons ajuster l'ordre des lignes de données, comme déplacer les lignes de haut en bas, déplacer les données de ligne vers le haut, etc. Ces opérations peuvent être effectuées en cliquant sur les boutons sur le front-end, et s'accompagnent d'une dynamique simple. En effet, il est facile de trier les données d'un tableau.

HTML

La page est un simple tableau de données. Nous plaçons trois liens "Move Up", "Move Down" et "Top" dans la ligne de données et définissons respectivement trois attributs de classe.

 
<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

Nous devons charger le fichier de la bibliothèque jQuery à l'avance, puis lier les événements de clic pour les trois opérations de déplacement vers le haut, vers le bas et vers le haut respectivement. Prenons l'exemple de "Déplacer vers le haut". Lorsque vous cliquez dessus, obtenez le contenu de la ligne et du tr actuellement cliqués, puis déterminez si la ligne est la première ligne. Si ce n'est pas la première ligne, insérez la ligne devant la. ligne précédente. Le but de l’échange est atteint. Bien sûr, nous pouvons ajouter des effets de transition fadeOut() et fadeIn() à la ligne, qui paraîtront plus vifs, sinon le mouvement ascendant passera en un éclair. Les processus opérationnels de "descendre" et "haut" sont similaires, veuillez consulter le 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"); 
  }); 
}); 

Bien entendu, dans les applications réelles, votre projet doit être combiné. Lorsque les opérations "monter", "descendre" et "haut" sont terminées, une interaction asynchrone Ajax doit être effectuée avec le programme d'arrière-plan pour garantir que le tri est effectué. les données sont en fait enregistrées en arrière-plan, puis après actualisation, les nouveaux résultats du tri seront affichés. Cet article n'expliquera pas le fonctionnement asynchrone en détail et se terminera ici.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent jQuery.