Jquery allows you to move the list up and down. jquery allows you to move the list up and down.

Jquery allows you to move the list up and down. jquery allows you to move the list up and down.

Let's get started with theme.
Today we are implementing a list page move up and move down function.

When you select columns in the list, click Move up or move down to dynamically move up or down.
The html code is as follows:

<Div> <input type = "button" onclick = "up ();" value = "Move up"> <input type = "button" onclick = "down (); "value =" Move Down "> </div> <table width =" 400px "height =" 200 "class =" mytable "cellpadding =" 5 "cellspacing =" 0 "> <tr> <td> NO. </td> <td> name </td> <td> gender </td> </tr> <td> <input type = "checkbox" id = "c1"/> 1 </td> <td> Xiaoyi </td> <td> male </td> </tr> <tr> <td> <input type = "checkbox" id = "c2"/> 2 </td> <td> Xiao 'er </td> <td> female </td> </tr> <td> <input type = "checkbox" id = "c3"/> 3 </td> <td> JOHN </td> <td> female </td> </tr> </table> lt; /div>

We define a css style called mytable.

.mytable td,.mytable{  font-size:12px;  color:red;  border:1px solid #000;  text-align:center;  border-collapse:collapse;  } 

Then implement the up () and down () methods. The Code is as follows:

$. Each ($ ("table input: checked"), function () {var onthis = $ (this ). parent (). parent (); var getUp = onthis. prev (); if ($ (getUp ). has ("input "). size () = 0) {alert ("top-level elements cannot be moved up"); return ;}$ (onthis ). after (getUp) ;});} function down () {$. each ($ ("table input: checked"), function () {var onthis = $ (this ). parent (). parent (); var getdown = onthis. next (); $ (getdown ). after (onthis );});}

Using the functions provided by jquery, the implementation is very simple. If you want to move multiple columns up and down at the same time, you only need to add a loop. The core code is the above.

The above is all the content of this article, and I hope it will help you learn jquery programming.

Articles you may be interested in:

• Jquery implements a pop-up prompt box for moving the mouse up and removing ideas and code
• Jquery button status works normally, move up, and press
• JQuery allows you to move the cursor over the element and dynamically prompt the message box.
• JQuery operates Select options to move up and down, remove and add, etc.
• Jquery implements the upstream and downstream code of the tr element.
• JQuery allows you to move the cursor over an image to display the border effect.
• Use Jquery to move up and down a Div
• Use jQuery toggleClass to change the color of mouse movement
• Jquery implements label move-up, move-down, and top-down
• JQuery implements the move-up and top-down methods for table rows