jQuery는 위아래로 움직이는 테이블 행과 상단 effect_jquery를 실현합니다.

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

HTML

이 페이지는 간단한 데이터 테이블입니다. 데이터 행에 "Move Up", "Move Down" 및 "Top" 링크 3개를 배치하고 각각 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 비동기 상호 작용을 수행하여 정렬을 보장해야 합니다. 데이터는 실제로 백그라운드에서 기록되며 새로 고침 후에는 새로운 정렬 결과가 표시됩니다. 이 기사에서는 비동기 작업에 대해 자세히 설명하지 않으며 여기에서 끝납니다.

이상 내용이 이 글의 전체 내용입니다. jQuery를 배우는 모든 분들께 도움이 되었으면 좋겠습니다.