jquery realisiert die Funktion, die Liste nach oben und unten zu verschieben_jquery

Kommen wir ohne weitere Umschweife zum Thema.
Was wir heute implementiert haben, ist eine Funktion zum Auf- und Abbewegen auf der Listenseite. Wie im Bild gezeigt:

Wenn eine Spalte in der Liste aktiviert ist, klicken Sie auf „Nach oben“ oder „Nach unten“, und sie wird dynamisch nach oben oder unten verschoben.
Der HTML-Code lautet wie folgt:

<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>

Wir definieren einen CSS-Stil namens mytable

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

Implementieren Sie dann die Methoden up() und down(). Der Code lautet wie folgt:

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

Verwenden Sie die bereitgestellte JQuery. Die Funktion ist sehr einfach zu implementieren. Wenn Sie mehrere Spalten gleichzeitig nach oben und unten verschieben möchten, müssen Sie nur eine Schleife hinzufügen. Der Kerncode ist wie oben.

Das Obige ist der Inhalt von jquery, um die Funktion zum Verschieben der Liste nach oben und unten zu implementieren. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).