如何在 jQuery 中移动表格行? [英] How to move table row in jQuery?

问题描述

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

Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?

使用 jQuery 的内置方法似乎没有任何直接的方法可以做到这一点，并且在使用 jQuery 选择行后，我还没有找到移动它的方法.此外，在我的情况下，使行可拖动(我以前用插件完成过)不是一个选项.

There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.

推荐答案

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

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

如果您的链接有一个 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>

演示 - JsFiddle

这篇关于如何在 jQuery 中移动表格行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！