jQuery realisiert das Auf- und Abbewegen von Tabellenzeilen und den oberen Effekt_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.

HTML

Die Seite ist eine einfache Datentabelle. Wir platzieren drei Links „Nach oben“, „Nach unten“ und „Oben“ und definieren diese jeweils über die jQuery-Operation.

 
<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 nach 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 dann nach der Aktualisierung die neuen Sortierergebnisse angezeigt. Dieser Artikel wird den asynchronen Vorgang nicht im Detail erklären und endet hier.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle, die jQuery lernen, hilfreich sein wird.