3

I used the code given here to move rows up/down in a gridview using jquery and this works perfectly, but how can implement to move a row to first position or last in the table?

Community
  • 1
  • 1
user2269971
  • 49
  • 1
  • 1
  • 7

3 Answers3

17

Add top and bottom links, and insert after/before the first/last row:

DEMO

JS:

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

HTML:

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
</table>
Kuf
  • 17,318
  • 6
  • 67
  • 91
  • Thanks Kuf, your solution works like charm, with some edits. For Gridview, i changed this row.insertBefore($("table tr:first")); to row.insertBefore($("table tr:first").next()); – user2269971 May 13 '13 at 15:16
1

you can do 

$(document).ready(function(){
    $(".first,.last").click(function(){
       var row = $(this).parents("tr:first");
       var rows= row.parents().find("tr");
       if ($(this).is(".first")) {
           row.insertBefore(rows[0]);
       } else {
           row.insertAfter(rows[rows.length]);
       }
   });  
});

jsfiddle

Abraham Uribe
  • 3,118
  • 7
  • 26
  • 34
0
$(document).ready(function(){
    $(".first,.last").click(function(){
       var row = $(this).parents("tr:first");
       var rows= row.parents().find("tr");
       if ($(this).is(".first")) {
           row.insertBefore(rows[0]);
       } else {
           row.insertAfter(rows[rows.length]);
       }
   });  
});
s.sathish kumar
  • 1
  • While this code may answer the question, it is better to include the essential parts of the answer here and provide a link or more info for reference. – Mark Aug 02 '16 at 13:58