JQuery实现置顶、置底、向上、向下、取消排序功能

IT后浪

已于 2024-07-13 21:21:29 修改

阅读量5.8k

点赞数 1

分类专栏： jquery 文章标签： jquery

于 2016-12-20 17:05:15 首次发布

本文链接：https://blog.csdn.net/aaalk1001/article/details/53765555

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如何使用

将一下内容保存为 .html 后缀的文件，打开即可；

<!DOCTYPE html>
<html>
	<head>
		<title>sort.html</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.4.2/jquery.min.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>
						<a href="javascript:void(0)" class="upbtn">上</a>
						<a href="javascript:void(0)" class="downbtn">下</a>
						<a href="javascript:void(0)" class="bottom">置底</a>
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>内容二</td>
					<td>
						<a href="javascript:void(0)" class="top">置顶</a>
						<a href="javascript:void(0)" class="upbtn">上</a>
						<a href="javascript:void(0)" class="downbtn">下</a>
						<a href="javascript:void(0)" class="bottom">置底</a>
					</td>
				</tr>
				<tr>
					<td>3</td>
					<td>内容三</td>
					<td>
						<a href="javascript:void(0)" class="top">置顶</a>
						<a href="javascript:void(0)" class="upbtn">上</a>
						<a href="javascript:void(0)" class="downbtn">下</a>
						<a href="javascript:void(0)" class="bottom">置底</a>
					</td>
				</tr>
				<tr>
					<td>4</td>
					<td>内容四</td>
					<td>
						<a href="javascript:void(0)" class="top">置顶</a>
						<a href="javascript:void(0)" class="upbtn">上</a>
						<a href="javascript:void(0)" class="downbtn">下</a>
						<a href="javascript:void(0)" class="bottom">置底</a>
					</td>
				</tr>
				<tr>
					<td>5</td>
					<td>内容五</td>
					<td>
						<a href="javascript:void(0)" class="top">置顶</a>
						<a href="javascript:void(0)" class="upbtn">上</a>
						<a href="javascript:void(0)" class="downbtn">下</a>
						<a href="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>