使用jQuery重新排序表格

如何重新排列表格行？使用jQuery重新排序表格

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

感谢您的帮助提前！ :)

来源

2016-06-09 Sprunkas

您的遍历逻辑和修改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作为默认字段值只是为了使运动更加明显。

来源

2016-06-09 16:14:43