Javascript 如何在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:

一个
两个
三
四
五

}))

---

尝试使用

您可以选择在您的平台上使用网格控件吗？@Quintin:谢谢。如果tr行样式显示“无”，则如何将行移动到块中显示的上一行？如果任何一行样式显示为“无”，则我需要多次单击以向上或向下移动。有什么建议吗？关于如何隐藏第一行的“向上”链接和最后一行的“向下”链接有什么建议吗？@rboarman类似于

$（“.Up，.Down”）.show（）的内容

then

$（“tr:first.up，tr:last.down”）.hide（）

但您可能需要根据您的具体需要调整选择器。@paulrajj您可以通过使用

preval

和

nextAll

代替

prev

和

next

并传递

：visible:first

作为选择器来实现这一点。我已经知道了，按如下方式分享：if（$（this）。is（.up）)){row.insertBefore（row.prev（“tr:has（td）”）；}否则{row.insertAfter（row.next（））；}可以用：var row=$（this.closest（'tr'）来缩短它；

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

$(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());
      }

  });