更改表格行的順序，除了一列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()); 
     } 
    }); 
}); 

現在發生什麼事是我想非觸摸的字段不變，但其他領域轉移到不必要的位置，像上面的

Jsfiddle

Thanks in推進

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在$（文件）。就緒（函數（）{}）;

$(".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。