JQuery实现置顶、置底、向上、向下、取消排序功能
来源：互联网 发布：淘宝 男装 原单 编辑：程序博客网 时间：2024/05/21 17:17
<!DOCTYPE html><html><head><title>sort.html</title><script type="text/javascript" src="js/jquery-1.4.2.js"></script></head><body><table border="1" cellpadding="10" cellspacing="0"><thead><tr><th>序号</th><th>内容</th><th>排序</th></tr></thead><tbody class="table"><tr><td>1</td><td>内容一</td><td><a href="javascript:void(0)" class="top">置顶</a> <ahref="javascript:void(0)" class="upbtn">上</a> <ahref="javascript:void(0)" class="downbtn">下</a> <ahref="javascript:void(0)" class="bottom">置底</a></td></tr><tr><td>2</td><td>内容二</td><td><a href="javascript:void(0)" class="top">置顶</a> <ahref="javascript:void(0)" class="upbtn">上</a> <ahref="javascript:void(0)" class="downbtn">下</a> <ahref="javascript:void(0)" class="bottom">置底</a></td></tr><tr><td>3</td><td>内容三</td><td><a href="javascript:void(0)" class="top">置顶</a> <ahref="javascript:void(0)" class="upbtn">上</a> <ahref="javascript:void(0)" class="downbtn">下</a> <ahref="javascript:void(0)" class="bottom">置底</a></td></tr><tr><td>4</td><td>内容四</td><td><a href="javascript:void(0)" class="top">置顶</a> <ahref="javascript:void(0)" class="upbtn">上</a> <ahref="javascript:void(0)" class="downbtn">下</a> <ahref="javascript:void(0)" class="bottom">置底</a></td></tr><tr><td>5</td><td>内容五</td><td><a href="javascript:void(0)" class="top">置顶</a> <ahref="javascript:void(0)" class="upbtn">上</a> <ahref="javascript:void(0)" class="downbtn">下</a> <ahref="javascript:void(0)" class="bottom">置底</a></td></tr></tbody></table><a href="javascript:void(0)" onclick="javascript:cancleRank();">取消排序</a></body><script type="text/javascript">$(document).ready(function () {//上移var $upbtn = $(".upbtn")$upbtn.click(function() {var $tr = $(this).parents("tr");if ($tr.index() != 0) {$tr.fadeOut().fadeIn();$tr.prev().before($tr);$tr.css("color","#f60");colorcancel();}});//下移var $downbtn = $(".downbtn");var len = $downbtn.length;$downbtn.click(function() {var $tr = $(this).parents("tr");if ($tr.index() != len - 1) {$tr.fadeOut().fadeIn();$tr.next().after($tr);$tr.css("color","#f60");colorcancel();}});//置顶var $top = $(".top");$top.click(function(){var $tr = $(this).parents("tr");if ($tr.index() != 0) {$tr.fadeOut().fadeIn();$("tbody").prepend($tr);$tr.css("color","#f60");colorcancel();}});//置底var $bottom = $(".bottom");var length = $bottom.length;$bottom.click(function(){var $tr = $(this).parents("tr");if ($tr.index() != length-1) {$tr.fadeOut().fadeIn();$("tbody").append($tr);$tr.css("color","#f60");colorcancel();}});});//初始化列表var initList = [], domArr = [];$('tbody tr').each(function(a){initList[a] = $(this).html();}) //取出所有tr放进数组 function getDom(){ $('tbody tr').each(function( m ){ domArr[m] = $(this); }); }//取消排序function cancleRank(){getDom();$.each(initList,function(b){$.each(domArr,function(c){if(domArr[c].html() == initList[b]){$('table tbody').append(domArr[c]);}});});$('tbody tr').each(function(){$(this).css("color","");})}//取消颜色高亮function colorcancel(){$('tbody tr').each(function(){var index = $(this).index()+1;var serialnumber = $(this).find("td:first").text();if(index == serialnumber){$(this).css("color","");}});}</script></html>
1 0
