使用Jquery上下移动行

Question

我使用了这里提供的代码，使用jquery在网格视图中将行上下移动，这很完美，但是如何实现将一行移动到表格的第一个位置或最后一个位置?

- user2269971

Answer 1

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

演示

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

---

谢谢Kuf，你的解决方案非常好用，只需要做一些修改。对于GridView，我将这个 row.insertBefore($("table tr:first")); 改为了 row.insertBefore($("table tr:first").next()); - user2269971

Answer 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

的英译中，保留了html格式，不做解释。

- Abraham Uribe

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

- s.sathish kumar

---

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