The implementation method of jQuery table row move-up and top-down, jquery table

The implementation method of jQuery table row move-up and top-down, jquery table

When operating on the data in the list, we need to adjust the order of data rows, such as moving and moving the row down, and moving the row data to the top, these operations can be completed by clicking the button on the front end, and table data sorting is easy with simple dynamic effects.

Run:

HTML
The page is a simple data table. We place the "Move Up", "Move down", and "TOP" links in the Data row, and define three class attributes respectively, we will implement these operations through jQuery.

<Table class = "table"> <tr> <td> HTML5 obtains location information </td> <a href =" # "class =" up "> move up </a> <a href =" # "class =" down "> move down </a> <a href =" # "class = "top"> pin to top </a> </td> </tr> <td> fixed footer ad strips implemented by CSS + cookies </a> </td> </tr>... </table>

JQuery
We need to load the jQuery library file in advance, and then bind the click events of the three operations: Move up, move down, and top down. Take "Move Up" as an example. When you click, obtain the content of the row currently clicked, and tr, and then determine whether the row is the first line. If it is not the first line, insert the row to the front of the previous row to achieve interchange. Of course, we can add the transition effects of fadeOut () and fadeIn () to the row, which looks more vivid. Otherwise, the process of moving up will flash. The steps for "Move Down" and "Top Down" operations are similar. Please refer to the Code:

$ (Function () {// move up var $ up = $ (". up ") $ up. click (function () {var $ tr = $ (this ). parents ("tr"); if ($ tr. index ()! = 0) {$ tr. fadeOut (). fadeIn (); $ tr. prev (). before ($ tr) ;}}); // move down var $ down =$ (". down "); var len = $ down. length; $ down. click (function () {var $ tr = $ (this ). parents ("tr"); if ($ tr. index ()! = Len-1) {$ tr. fadeOut (). fadeIn (); $ tr. next (). after ($ tr) ;}}); // top var $ top =$ (". top "); $ top. click (function () {var $ tr = $ (this ). parents ("tr"); $ tr. fadeOut (). fadeIn (); $ (". table "). prepend ($ tr); inclutr.css ("color", "# f60 ");});});

Of course, in actual applications, you should use your project to perform Ajax Asynchronous interaction with the background program when you perform "Move Up", "Move down", and "Top Down" operations, ensure that the sorting data is actually recorded in the background, and then the new sorting result will be displayed after refreshing. This article will not detail this asynchronous operation.