JavaScript：以为例，元素按内容从小到大顺序排列

5个li标签，标签内有数字

<input id="btn1" type="button" value="排序">
<ul id='ul1'>
	<li>51</li>
	<li>12</li>
	<li>32</li>
	<li>4</li>
	<li>45</li>
</ul>

获取各个元素

		var oUl = document.getElementById('ul1');
		var oBtn = document.getElementById('btn1');
		var aLi = oUl.getElementsByTagName('li');
		var arr = [];//创建数组存放aLi

为按钮定义功能，其中3段主要代码已经添加注释

		oBtn.onclick = function(){
			for (var i = aLi.length - 1; i >= 0; i--) {
				arr[i] = aLi[i]; 
				//aLi的性质和Array数组不同，不能调用sort函数，故而将其放入一个arr数组中
			}
			arr.sort(function(li1,li2){
				n1 = parseInt(li1.innerHTML);
				n2 = parseInt(li2.innerHTML);
				return n2-n1;
			});//以innerHTML进行排序，即是以li标签中的数字大小排序
			for (var i = aLi.length - 1; i >= 0; i--) {
				alert('把最小的'+arr[i].innerHTML+'拿出来');
				oUl.appendChild(arr[i]);
			}//appendChild，从小到大append
		}
	};

完整例程

<!DOCTYPE html>
<html>
<head>
	<title>111</title>
<style type="text/css">

</style>
<script type="text/javascript">
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var oBtn = document.getElementById('btn1');
		var aLi = oUl.getElementsByTagName('li');
		var arr = [];//创建数组存放aLi

		oBtn.onclick = function(){
			for (var i = aLi.length - 1; i >= 0; i--) {
				arr[i] = aLi[i]; 
				//aLi的性质和Array数组不同，不能调用sort函数，故而将其放入一个arr数组中
			}
			arr.sort(function(li1,li2){
				n1 = parseInt(li1.innerHTML);
				n2 = parseInt(li2.innerHTML);
				return n2-n1;
			});//以innerHTML进行排序，即是以li标签中的数字大小排序
			for (var i = aLi.length - 1; i >= 0; i--) {
				alert('把最小的'+arr[i].innerHTML+'拿出来');
				oUl.appendChild(arr[i]);
			}//appendChild，从小到大append
		}
	};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序">
<ul id='ul1'>
	<li>51</li>
	<li>12</li>
	<li>32</li>
	<li>4</li>
	<li>45</li>
</ul>
</body>
</html>

总结，如果有其他类型的标签的排序，比如table中某一列按照年龄排列，也和上面的步骤一样。首先将需要排序的cell放进一个数组，然后对该数组进行排序，最后使用appendChild进行排序。

table排序例子
posted @ 2020-02-10 16:42  昨夜昙花  阅读(18)  评论(0)    收藏  举报