JQ JS tr 上下移动

通常我们有时候在做项目的时候会想到用排序的这种方法 这个时候我们想到的就是javascript来操作上下移动来进行操作实现对数据的排序.也就是说是在一个表格里面的每一个（tr）行都可以上下的移动

Html: 

for(int i = 0 ;i < 5; i++)
   {
   <tr>
    <td>
     <div style="display: inline-block; width: 70%; text-align: center">
      <a class="down" onclick="down(this)"@if (times == count)
            {<text>style="display: none"</text>}>
       <i class="icon-arrow-down "></i>
      </a>
      <a class="up" onclick="up(this)" @if (i == 0)
            {<text>style="display: none"</text>}>
       <i class="icon-arrow-up"></i>
      </a>
     </div>
     <a><i class="icon-trash" onclick="DeleteCanTingPic(this)"></i></a>
     <input type="hidden" name="res04_sort" />
    </td>
    <td>i</td>
    <td>i</td>
   </tr>
   }

//	上移
function up(obj) {
     var tr = $(obj).parent().parent().parent();
     var table = $(tr).parent();
     var index = $(tr).index();
     tr.prev().find("a").show();
     tr.find("a").show();
 if (index == 2) {
      tr.find(".up").hide();
 }
 if (index == table.find("tr").length - 1) {
      tr.prev().find(".down").hide();
 }
    //tr互换
     tr.after(tr.prev());
}

//	下移
function down(obj) {
     var tr = $(obj).parent().parent().parent();
     var table = $(tr).parent();
     var index = $(tr).index();
     tr.next().find("a").show();
     tr.find("a").show();
     if (index == 1) {
      tr.next().find(".up").hide();
 }
 if (index == table.find("tr").length - 2) {
     tr.find(".down").hide();
 }
     //tr互换
     tr.before(tr.next());
}

//	點擊刪除用餐環境圖片
function DeleteCanTingPic(obj) {
     var tr = $(obj).parent().parent();
     var index = $(tr).parent().index();
     var length = $("#CanTingPic tr").length - 1;
     $(tr).parent().remove();
 //刪除爲第一行
 if (index == 1) {
      $("#CanTingPic tr:eq(1)").find(".up").hide();
 }
 //	刪除爲最后一行
 if (index == length) {
      $("#CanTingPic tr:last .down").hide();
 }
}