So implementieren Sie jQuery-Tabellenzeilen nach oben, unten und nach oben_jquery

Wenn wir Listendaten bearbeiten, müssen wir die Reihenfolge der Datenzeilen anpassen, z. B. Zeilen nach oben und unten verschieben, Zeilendaten nach oben verschieben usw. Diese Vorgänge können durch Klicken auf die Schaltflächen im Frontend und abgeschlossen werden werden von einfacher Dynamik begleitet. Tatsächlich ist es einfach, Tabellendaten zu sortieren.

Operationsrendering:

HTML
Auf der Seite befindet sich eine einfache Datentabelle. Wir platzieren drei Links „Nach oben“, „Nach unten“ und „Oben“ und definieren jeweils drei Klassenattribute.

<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
Wir müssen die jQuery-Bibliotheksdatei im Voraus laden und dann die Klickereignisse für die drei Vorgänge „Nach oben“, „Nach unten“ und „Oben“ binden. Nehmen Sie als Beispiel „Nach oben“, um den Inhalt der aktuell angeklickten Zeile und Tr abzurufen und dann festzustellen, ob es sich bei der Zeile um die erste Zeile handelt vorherige Zeile. Der Zweck des Austauschs ist erreicht. Natürlich können wir der Zeile die Übergangseffekte fadeOut() und fadeIn() hinzufügen, die lebendiger aussehen, sonst vergeht die Aufwärtsbewegung wie im Flug. Die Betriebsabläufe von „Nach unten bewegen“ und „Oben“ sind ähnlich, siehe 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"); 
 }); 
}); 

Natürlich sollte Ihr Projekt in tatsächlichen Anwendungen kombiniert werden, wenn die Vorgänge „Nach oben verschieben“, „Nach unten verschieben“ und „Oben“ abgeschlossen sind Die Daten werden tatsächlich im Hintergrund aufgezeichnet und nach der Aktualisierung werden die neuen Sortierergebnisse angezeigt. In diesem Artikel wird der asynchrone Vorgang nicht im Detail erläutert.