Как переместить строку таблицы в jQuery?

Скажем, у меня были ссылки со стрелками вверх/вниз для перемещения строки таблицы вверх или вниз по порядку. Какой был бы самый простой способ переместить эту строку вверх или вниз по одной позиции (используя 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>

Демо-версия JsFiddle

Ответ 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