如何在jQuery中移动表格行？

Posted 2023-05-09

【中文标题】如何在jQuery中移动表格行？

【英文标题】：How to move table row in jQuery?

【发布时间】：2010-12-06 21:27:22

【问题描述】：

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

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

【问题讨论】：

您可以选择在您的平台上使用网格控件吗？

【参考方案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

【讨论】：

@Quintin：谢谢。如果 tr 行样式不显示，那么如何将行移动到显示块的上一行？如果任何一种行样式都没有显示，那么我需要多次单击以向上或向下移动。有什么建议吗？

关于如何隐藏第一行的“向上”链接和最后一行的“向下”链接有什么建议吗？

@rboarman 类似于$(".up,.down").show(); 然后$("tr:first .up,tr:last .down").hide();，但您可能需要根据您的确切需求调整选择器。

@paulrajj 您可以使用prevAll 和nextAll 代替prev 和next 并传递:visible:first 作为选择器来完成此操作。

我已经想通了，分享如下： if ($(this).is(".up")) row.insertBefore(row.prev("tr:has(td)" )); 其他 row.insertAfter(row.next());

【参考方案2】：

$(document).ready(function () 
   $(".up,.down").click(function () 
      var $element = this;
      var row = $($element).parents("tr:first");

      if($(this).is('.up'))
         row.insertBefore(row.prev());
       
      else
         row.insertAfter(row.next());
      

  );

);

尝试使用 JSFiddle

【讨论】：

可以缩短它：var row = $(this).closest('tr');