摘要:
通常我们有时候在做项目的时候会想到用排序的这种方法 这个时候我们想到的就是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> }JQ:
// 上移 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(); } }