Таблица переупорядочения с помощью jQuery

Question

Как изменить порядок строк таблицы?

<table class="table table-bordered" style="text-align: center; width: 95%;"> 
    <tr> 
     <td style="width: 2%;"></td> 
     <td>Prekės pavadinimas</td> 
     <td style="width: 15%;">Kiekis</td> 
     <td style="width: 15%;">Kaina</td> 
     <td style="width: 15%;">Suma</td> 
     <td style="width: 2%;"></td> 
    </tr> 
    <tr> 
     <td style="vertical-align: middle;"> 
      <span class="glyphicon glyphicon-menu-up"></span><br> 
      <span class="glyphicon glyphicon-menu-down"></span> 
     </td> 
     <td style="vertical-align: middle;"> 
      <div class="form-group"> 
       <label for="product"></label> 
       <input type="text" class="form-control" id="product" name="product" placeholder="Prekė"> 
      </div> 
     </td> 
     <td style="vertical-align: middle;"> 
      <div class="form-group"> 
       <label for="quantity"></label> 
       <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Kiekis"> 
      </div> 
     </td> 
     <td style="vertical-align: middle;"> 
      <div class="form-group"> 
       <label for="price"></label> 
       <input type="text" class="form-control" id="price" name="price" placeholder="Kaina"> 
      </div> 
     </td> 
     <td style="vertical-align: middle;"> 
      <div class="form-group"> 
       <label for="total"></label> 
       <input type="text" class="form-control" id="total" name="total" placeholder="Suma" disabled> 
      </div> 
     </td> 
     <td style="vertical-align: middle;"><a href="#"><span class="glyphicon glyphicon-remove" style="color: red;"></span></a></td> 
    </tr> 
</table> 

$('tr td span:nth-of-type(1)').on('click', function() { 
    moveup = $(this).parent(); 
    moveup.prev().before(moveup); 
}); 

$('tr td span:nth-of-type(2)').on('click', function() { 
    movedown = $(this).parent(); 
    movedown.next().after(movedown); 
}); 

А вот как мой код теперь работает с JQuery: http://jsfiddle.net/zJ8hd/21/

Спасибо за помощь заранее! :)

Answer 1

Ваша логика для обхода и о внесении изменений в DOM не совсем верно. Вы должны получить элемент родительского tr, а затем вставьте его перед/после предыдущим/следующей tr, что-то вроде этого:

$('tr td span:nth-of-type(1)').on('click', function() { 
    var $row = $(this).closest('tr') 
    if ($row.index() == 1) 
     return; 
    $row.insertBefore($row.prev()); 
}); 

$('tr td span:nth-of-type(2)').on('click', function() { 
    var $row = $(this).closest('tr') 
    $row.insertAfter($row.next()); 
}); 

Working example

Примечание я добавил foo и bar в качестве значений полей по умолчанию в скрипке только чтобы сделать движение более очевидным.

Answer 2

moveup = $(this).parent(); 

Здесь this относится к диапазону, так что его родитель является td не строка. Если вы хотите переместить всю строку, вы должны посмотреть на .closest() (1), а затем использовать .prev() или .next().

Вы близки к решению, я дам вам немного поработать;)

1 ->https://api.jquery.com/closest/