Изменить порядок строк в таблице, за исключением одного столбца jquery

Question

Я пытаюсь создать таблицу html, которую строки могут быть заказаны пользователем, с помощью стрелок вверх и вниз. но есть поле, которое я хотел оставить без изменений, поле id.

Html код:

<table class="table routes_t"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Local</th> 
      <th>Coordenadas</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="ord">1</td> 
      <td>Template2</td> 
      <td>37.13318,-8.5392</td> 
      <td> 
       <span class="id" data-id="9"></span> 
       <a href="#" onclick="remove(9)" "=""><i class="glyphicon glyphicon-remove pull-right"></i></a> 
       <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a> 
       <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a> 
      </td> 
     </tr> 
     <tr> 
      <td class="ord">2</td> 
      <td>Teste_unserial</td> 
      <td>37.13008,-8.54247</td> 
      <td> 
       <span class="id" data-id="10"></span> 
       <a href="#" onclick="remove(10)" "=""><i class="glyphicon glyphicon-remove pull-right"></i></a> 
       <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a> 
       <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

и мой JQuery является:

$(document).ready(function(){ 
    $(".uporder,.downorder").click(function(){ 
     var row = $(this).parents("tr:first"); 
     if ($(this).is(".downorder")) { 
      row.children('td:not(:first)').insertBefore(row.prev()); 
     } else { 
      row.insertAfter(row.next()); 
     } 
    }); 
}); 

К настоящему времени, что произойдет это поле я хотел Untouch нетронутым, но другие поля движется к нежелательным позициям, как сверху в

Jsfiddle

Спасибо заранее

Answer 1

Попробуйте

$(document).ready(function() { 
 
    $(".uporder,.downorder").click(function() { 
 
     var row = $(this).closest("tr"), 
 
      rftd = row.find('.ord'), 
 
      id = row.find('.ord').text(), 
 
      tar, tftd; 
 
     if ($(this).is(".downorder")) { 
 
      tar = row.prev(); 
 
      row.insertBefore(tar); 
 
     } else { 
 
      tar = row.next(); 
 
      row.insertAfter(tar); 
 
     } 
 
     if (tar.length) { 
 
      tftd = tar.find('.ord'); 
 
      rftd.text(tftd.text()); 
 
      tftd.text(id) 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table routes_t"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Local</th> 
 
     <th>Coordenadas</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="ord">1</td> 
 
     <td>Template2</td> 
 
     <td>37.13318,-8.5392</td> 
 
     <td> 
 
     <span class="id" data-id="9"></span> 
 
     <a href="#" onclick="remove(9)" ><i class="glyphicon glyphicon-remove pull-right"></i></a> 
 
     <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a> 
 
     <a href="#" class="downorder"><i class="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css glyphicon-arrow-up pull-right"></i></a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="ord">2</td> 
 
     <td>Teste_unserial</td> 
 
     <td>37.13008,-8.54247</td> 
 
     <td> 
 
     <span class="id" data-id="10"></span> 
 
     <a href="#" onclick="remove(10)"><i class="glyphicon glyphicon-remove pull-right"></i></a> 
 
     <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a> 
 
     <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Поместите следующий JQuery в $ (документ) .ready (функция() {});

$(".uporder,.downorder").click(function(){ 
    var current_row = $(this).parents("tr"); 
    var row; 
    if($(this).hasClass("uporder")) 
     row = $(this).parents("tr").prev(); 
    else 
     row = $(this).parents("tr").next();    
    if($("tr").index(row) != -1){ 
     var loc = $(row).children("td:nth-child(2)").text(); 
     var coord = $(row).children("td:nth-child(3)").text(); 
     $(row).children("td:nth-child(2)").text($(current_row).children("td:nth-child(2)").text()); 
     $(row).children("td:nth-child(3)").text($(current_row).children("td:nth-child(3)").text()); 
     $(current_row).children("td:nth-child(2)").text(loc); 
     $(current_row).children("td:nth-child(3)").text(coord); 
    } 
}); 

Адрес fiddle.