jQuery menyedari baris jadual bergerak ke atas dan ke bawah dan effect_jquery atas

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.

HTML

Halaman tersebut ialah jadual data ringkas 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

Kami 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 dan akan berakhir di sini.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang mempelajari jQuery.