如何在jQuery中移动表格行？答案

【问题标题】：How to move table row in jQuery?如何在jQuery中移动表格行？
【发布时间】：2010-12-06 21:27:22
【问题描述】：

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

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

【问题讨论】：

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

标签： javascript jquery html dom

【解决方案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');