Jquery上下移动行答案

【问题标题】：Jquery to move row up and downJquery上下移动行
【发布时间】：2013-05-13 14:26:36
【问题描述】：

我使用here 给出的代码使用 jquery 在 gridview 中向上/向下移动行，这非常有效，但是如何实现将行移动到表中的第一个位置或最后一个位置？

【问题讨论】：

【解决方案1】：

添加顶部和底部链接，并在第一行/最后一行之后/之前插入：

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，您的解决方案非常有魅力，并进行了一些修改。对于 Gridview，我更改了此 row.insertBefore($("table tr:first"));到 row.insertBefore($("table tr:first").next());

【解决方案2】：

你可以的

$(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

【讨论】：

【解决方案3】：

$(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]);
       }
   });  
});

【讨论】：

虽然此代码可能会回答问题，但最好在此处包含答案的基本部分并提供链接或更多信息以供参考。