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

问题描述

说我已经链接上/下箭头，以便按顺序向上或向下移动表格列。最直接的方式是将该行向上或向下移动一个位置（使用jQuery）？

似乎没有任何直接的方法来使用jQuery的内置方法，在用jQuery选择行后，我还没有找到一种方法来移动它。此外，在我的情况下，使行可拖动（我以前用插件完成）不是一个选项。

解决方案

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

鉴于您的链接有一个类 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：

 code><表> 
< tr> 
< td> One< / td> 
< td> 
< a href =＃class =up> Up< / a> 
< a href =＃class =down> Down< / a> 
< / td> 
< / tr> 
< tr> 
< td>两个/ 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

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)?

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..

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>

Demo - JsFiddle

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