Bagaimana untuk melaksanakan baris jadual jQuery ke atas, bawah, dan ke top_jquery

Apabila kami mengendalikan data senarai, kami perlu melaraskan susunan baris data, seperti menggerakkan baris ke atas dan ke bawah, mengalihkan data baris ke atas, dsb. Operasi ini boleh diselesaikan dengan mengklik butang pada bahagian hadapan dan disertakan dengan dinamik ringkas Secara berkesan, adalah mudah untuk mengisih data jadual.

Pemarahan operasi:

HTML
Terdapat jadual data ringkas pada halaman Kami meletakkan tiga pautan "Move Up", "Move Down" dan "Top" dalam baris data, dan masing-masing mentakrifkan tiga atribut kelas.

<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
Kita perlu memuatkan fail perpustakaan jQuery terlebih dahulu, dan kemudian mengikat peristiwa klik untuk tiga operasi bergerak ke atas, bergerak ke bawah dan atas masing-masing. Ambil "Move Up" sebagai contoh Apabila diklik, dapatkan kandungan baris dan tr yang sedang diklik, dan kemudian tentukan sama ada baris itu adalah baris pertama Jika ia bukan baris pertama, kemudian masukkan baris di hadapan baris sebelumnya. Tujuan pertukaran tercapai. Sudah tentu, kita boleh menambah kesan peralihan fadeOut() dan fadeIn() pada baris, yang akan kelihatan lebih jelas, jika tidak, pergerakan ke atas akan berlalu dalam sekelip mata. Proses pengendalian "bergerak ke bawah" dan "atas" adalah serupa, sila lihat kod:

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

Sudah tentu, dalam aplikasi sebenar, projek anda harus digabungkan Apabila operasi "bergerak ke atas", "bergerak ke bawah" dan "atas" selesai, interaksi tak segerak Ajax harus dilakukan dengan program latar belakang untuk memastikan yang diisih. data sebenarnya direkodkan di latar belakang, dan kemudian Selepas menyegarkan, hasil pengisihan baharu akan dipaparkan Artikel ini tidak akan menerangkan operasi tak segerak secara terperinci.