Question

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

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

Answer 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

Answer 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

如何在jQuery中移动表行？

2 个答案: