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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.