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

WBOY
Lepaskan: 2016-05-16 15:56:34
asal
1522 orang telah melayarinya

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> 
Salin selepas log masuk

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"); 
  }); 
}); 
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan