How to move table row in jQuery?

by

You could also do something pretty simple with the adjustable up/down..

given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});

HTML:

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
</table>

Demo – JsFiddle

More Related Contents:

  1. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  2. jQuery document.createElement equivalent?
  3. How can I select an element by name with jQuery?
  4. What is the most efficient way to create HTML elements using jQuery?
  5. How do I create a link using javascript?
  6. How to show Page Loading div until the page has finished loading?
  7. Finding line-wraps
  8. How to get the element clicked (for the whole document)?
  9. Why are duplicate ID values not allowed in HTML?
  10. Is there a DOM event that fires when an HTML select element is closed?
  11. How to find a parent with a known class in jQuery?
  12. jQuery: how to change tag name?
  13. Is there any “on DOM change” event? [duplicate]
  14. Get the DOM path of the clicked
  15. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  16. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  17. How to add DOM element script to head section?
  18. Uncaught TypeError: Cannot read property ‘top’ of undefined
  19. JQuery html() vs. innerHTML
  20. How can I get access to a Highcharts chart through a DOM-Container?
  21. Open new window without focus on it [duplicate]
  22. How can I remove wrapper (parent element) without removing the child?
  23. User Activity Tracking using javascript library [closed]
  24. window.getSelection return html [duplicate]
  25. How to properly unload/destroy a VIDEO element
  26. How to get on-screen visible element objects in jQuery? [duplicate]
  27. Test if an element can contain text
  28. Why I cant use jQuery functionality
  29. Getting Bootstrap’s modal content from another page
  30. jQuery selector to target any class name (of multiple present) starting with a prefix?

Leave a Comment