jquery menyedari fungsi mengalihkan senarai ke atas dan ke bawah_jquery

Tanpa berlengah lagi, mari kita ke topik.
Apa yang kami laksanakan hari ini ialah fungsi untuk bergerak ke atas dan ke bawah halaman senarai. Seperti yang ditunjukkan dalam gambar:

Apabila lajur dalam senarai ditandakan, klik Move Up atau Move Down, dan ia akan bergerak ke atas atau bawah secara dinamik.
Kod html adalah seperti berikut:

<div> 
  <input type="button" onclick="up();" value=" 上移 "> 
  <input type="button" onclick="down();" value=" 下移 "> 
</div> 
 <div> 
<table width="400px" height="200" class="mytable" cellpadding="5" cellspacing="0"> 
<tr> 
 <td>序号</td> 
 <td>名字</td> 
  <td>性别</td> 
</tr> 
 <tr> 
 <td><input type="checkbox" id="c1"/>1</td> 
 <td>小一</td> 
  <td>男</td> 
</tr> 
 <tr> 
 <td><input type="checkbox" id="c2"/>2</td> 
 <td>小二</td> 
  <td>女</td> 
</tr> 
<tr> 
 <td><input type="checkbox" id="c3"/>3</td> 
 <td>小三</td> 
  <td>女</td> 
</tr> 
</table> 
lt;/div>

Kami mentakrifkan gaya css yang dipanggil mytable

 font-size:12px; 
 color:red; 
 border:1px solid #000; 
 text-align:center; 
 border-collapse:collapse; 
 }

Kemudian laksanakan kaedah atas() dan bawah() Kodnya adalah seperti berikut:

$.each($("table input:checked"),function(){ 
  var onthis=$(this).parent().parent(); 
  var getUp=onthis.prev(); 
   
  if ($(getUp).has("input").size()==0) 
  { 
   alert("顶级元素不能上移"); 
   return; 
  } 
  $(onthis).after(getUp); 
 }); 
} 
 function down(){ 
 $.each($("table input:checked"),function(){ 
  var onthis=$(this).parent().parent(); 
  var getdown=onthis.next(); 
  $(getdown).after(onthis); 
 }); 
}

Gunakan jquery yang disediakan Fungsi ini sangat mudah untuk dilaksanakan Sudah tentu, jika anda ingin memindahkan berbilang lajur ke atas dan ke bawah pada masa yang sama, anda hanya perlu menambah kod teras adalah seperti di atas.

Di atas adalah kandungan jquery untuk melaksanakan fungsi mengalihkan senarai ke atas dan ke bawah_jquery Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!