javascript - 如何在 jQuery 中移动表格行？

Question

假设我有带有向上/向下箭头的链接，用于按顺序向上或向下移动表格行。将该行向上或向下移动一个位置(使用 jQuery)的最直接方法是什么？

似乎没有任何直接的方法可以使用 jQuery 的内置方法来执行此操作，并且在使用 jQuery 选择行后，我还没有找到移动它的方法。此外，就我而言，使行可拖动(我之前使用插件完成过)不是一个选项。

Answer 1

您还可以使用可调节的上/下按钮做一些非常简单的事情..

给定您的链接具有 up 或 down 类，您可以将其连接到链接的点击处理程序中。这也是假设链接位于网格的每一行内。

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