jquery réalise la fonction de déplacer la liste vers le haut et vers le bas_jquery

Sans plus tarder, venons-en au sujet.
Ce que nous avons implémenté aujourd'hui est une fonction permettant de monter et descendre la page de liste. Comme le montre l'image :

Lorsqu'une colonne de la liste est cochée, cliquez sur Monter ou Descendre, et elle se déplacera vers le haut ou vers le bas de manière dynamique.
Le code html est le suivant :

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

Nous définissons un style CSS appelé mytable

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

Implémentez ensuite les méthodes up() et down() Le code est le suivant :

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

Utilisez le jquery fourni La fonction est très simple à implémenter. Bien entendu, si vous souhaitez déplacer plusieurs colonnes de haut en bas en même temps, il vous suffit d'ajouter une boucle. Le code de base est comme ci-dessus.

Ce qui précède est le contenu de jquery pour implémenter la fonction de déplacement de la liste vers le haut et vers le bas_jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !