jQuery 테이블 행을 위쪽, 아래쪽 및 top_jquery에 구현하는 방법

목록 데이터를 조작할 때 행을 위아래로 이동하거나 행 데이터를 맨 위로 이동하는 등 데이터 행의 순서를 조정해야 합니다. 이러한 작업은 프런트 엔드에 있는 버튼을 클릭하여 완료할 수 있으며, 간단한 역학을 수반하므로 효과적으로 테이블 데이터를 쉽게 정렬할 수 있습니다.

작업 렌더링:

HTML
페이지에 간단한 데이터 테이블이 있습니다. 데이터 행에 "Move Up", "Move Down" 및 "Top" 링크를 배치하고 각각 3개의 클래스 속성을 jQuery를 통해 구현해 보겠습니다.

<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
jQuery 라이브러리 파일을 미리 로드한 다음 위로 이동, 아래로 이동, 위로 각각 이동하는 세 가지 작업에 대한 클릭 이벤트를 바인딩해야 합니다. 예를 들어 "위로 이동"을 클릭하면 현재 클릭된 행의 내용과 tr을 얻은 다음 행이 첫 번째 행이 아닌지 확인하고 행 앞에 삽입합니다. 이전 행 교환 목적이 달성되었습니다. 물론, 행에 fadeOut() 및 fadeIn() 전환 효과를 추가하면 더욱 생생하게 보일 수 있습니다. 그렇지 않으면 위쪽으로의 움직임이 순식간에 지나갈 것입니다. "아래로 이동"과 "위로 이동"의 작업 프로세스는 유사합니다. 코드를 참조하세요.

$(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"); 
 }); 
}); 

물론 실제 애플리케이션에서는 프로젝트를 결합해야 하며 "위로 이동", "아래로 이동" 및 "위로 이동" 작업이 완료되면 백그라운드 프로그램과 함께 Ajax 비동기 상호 작용을 수행하여 정렬을 보장해야 합니다. 데이터는 실제로 백그라운드에서 기록되며 새로 고침 후에는 새로운 정렬 결과가 표시됩니다. 이 기사에서는 비동기 작업에 대해 자세히 설명하지 않습니다.