实现点击表头排序功能，点一次降序，再点一次升序。

[问答题]

GreenyDo

<!DOCTYPE html>
<html>
	<head>
		<style>
			html,body,ul,li{
				margin: 0;
				padding: 0;
				border: 0;
			}
			#main-body{
				width: 400px;
				margin: 0 auto;
				margin-top: 150px;
				text-align: center;
			}
			ul{
				margin-bottom: 30px;
				font-size: 30px;
		
			}
			li{
				list-style: none;
				width: 90px;
				border: 2px solid green;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="main-body">
			<ul>
				<li>8</li>
				<li>3</li>
				<li>1</li>
				<li>5</li>
				<li>6</li>
				<li>9</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<button id="ascend">升序</button>
			<button id="descend">降序</button>
		</div>
		<script>
			window.onload = function(){
				var ulRecord = document.getElementById("main-body").querySelector("ul");
				var listArray = ulRecord.querySelectorAll("li");
				var sortArray = [];
				for(var i = 0,len = listArray.length;i<len;i++){
					sortArray.push(listArray[i].innerHTML);
				}
				var button1 = document.getElementById("ascend");//升序按钮
				var button2 = document.getElementById("descend");//降序按钮
				function compare(value1,value2){
					return value1-value2;
				}
				button1.onclick = function(){
					sortArray.sort(compare);
					var newLiHtml="";
					for(var i = 0,len = sortArray.length;i < len;i++){
						newLiHtml += "<li>" + sortArray[i] +"<i>";
					}
					ulRecord.innerHTML = newLiHtml;
				}
				button2.onclick = function(){
				sortArray.sort(compare);
				sortArray.reverse();//反转数组项
				var newLiHtml="";
				for(var i = 0,len = sortArray.length;i < len;i++){
					newLiHtml += "<li>" + sortArray[i] +"<i>";
				}
				ulRecord.innerHTML = newLiHtml;
			}
		}
		</script>
	</body>
</html>

为了方便观看随便设了样式。如果单个按钮的话可以给这个按钮设置一个value。

发表于 2016-08-03 17:44:14 回复(0)