title: Change table row order except one column jquery
body: <p>I'm trying to make a html table which the rows can be ordered by the user, through up and down arrows. but there's a field i wanted leave it unchanged, the id field.</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;table class="table routes_t"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Local&lt;/th&gt;
              &lt;th&gt;Coordenadas&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="ord"&gt;1&lt;/td&gt;
              &lt;td&gt;Template2&lt;/td&gt;
              &lt;td&gt;37.13318,-8.5392&lt;/td&gt;
              &lt;td&gt;
                  &lt;span class="id" data-id="9"&gt;&lt;/span&gt;
                  &lt;a href="#" onclick="remove(9)" "=""&gt;&lt;i class="glyphicon glyphicon-remove pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="uporder"&gt;&lt;i class="glyphicon glyphicon-arrow-down pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="downorder"&gt;&lt;i class="glyphicon glyphicon-arrow-up pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="ord"&gt;2&lt;/td&gt;
              &lt;td&gt;Teste_unserial&lt;/td&gt;
              &lt;td&gt;37.13008,-8.54247&lt;/td&gt;
              &lt;td&gt;
                  &lt;span class="id" data-id="10"&gt;&lt;/span&gt;
                  &lt;a href="#" onclick="remove(10)" "=""&gt;&lt;i class="glyphicon glyphicon-remove pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="uporder"&gt;&lt;i class="glyphicon glyphicon-arrow-down pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#" class="downorder"&gt;&lt;i class="glyphicon glyphicon-arrow-up pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and my jQuery is:</p>
  
  <pre><code>$(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());
          }
      });
  });
  </code></pre>
  
  <p>By now what happen is the field I wanted untouch is untouched but the other fields moves to unwanted positions, like above of the <code>&lt;tbody&gt;</code>.</p>
  
  <p><a href="http://jsfiddle.net/xjf6o1rb/" rel="nofollow noreferrer">Jsfiddle</a></p>