js中DOM操作之排序

最新推荐文章于 2024-08-28 19:01:32 发布

zhanjiejiaoxiangni

最新推荐文章于 2024-08-28 19:01:32 发布

阅读量3.1k

点赞数

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

本文链接：https://blog.csdn.net/zhanjiejiaoxiangni/article/details/83065800

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、appendChild(),将ul的第一个子元素添加到末尾，

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ul1{
			background:green;
		}
		
	</style>
	<script>
		/*li排序*/
		/*知识点：appendChild() 先将节点从别处删除，再进行添加*/
		window.onload= function(){
			var arr=[];
			var oUl1 = document.getElementById('ul1');
			var oBtn = document.getElementById('btn1');
			var oLi = oUl1.getElementsByTagName('li');
			
			
			//alert(arr[3].innerHTML);
			
			oBtn.onclick = function (){
				//从oUl1的第一个位置删除，添加到最后的位置
				oUl1.appendChild(oLi[0]);
												
				
			};
			
			
		}
	</script>
</head>
<body>
	<input type="button" value="排序" id="btn1"/>
	<ul id="ul1">
		<li>23</li>
		<li>12</li>
		<li>88</li>
		<li>6</li>
	</ul>
	
	
</body>
</html>

2、li排序，知识点：appendChild() 先将节点从别处删除，再进行添加

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ul1{
			background:green;
		}
		
	</style>
	<script>
		/*li排序*/
		/*知识点：appendChild() 先将节点从别处删除，再进行添加*/
		window.onload= function(){
			var arr=[];
			var oUl1 = document.getElementById('ul1');
			var oBtn = document.getElementById('btn1');
			var oLi = oUl1.getElementsByTagName('li');
			for(var i=0;i<oLi.length;i++){
				arr.push(oLi[i]);
			}
			arr.sort(function(li1,li2){
				var sLi1 = parseInt(li1.innerHTML);
				var sLi2 = parseInt(li2.innerHTML);
				return sLi1 - sLi2;
			});
			
			//alert(arr[3].innerHTML);
			
			oBtn.onclick = function (){
				//从oUl1的第一个位置删除，添加到最后的位置
				//oUl1.appendChild(oLi[0]);
			
				//将排序完的数组添加到oUl1下，
				for(var i=0;i<arr.length;i++){
					oUl1.appendChild(arr[i]);
				}
				
				
			};
			
			
		}
	</script>
</head>
<body>
	<input type="button" value="排序" id="btn1"/>
	<ul id="ul1">
		<li>23</li>
		<li>12</li>
		<li>88</li>
		<li>6</li>
	</ul>
	
	
</body>
</html>

3、表格排序，原理一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
		<script>
			/**
				功能实现：1、实现表格按表格第一列ID排序
				
			*/
			window.onload = function(){
				var oTab = document.getElementById('tab1');
				
				var oBtn = document.getElementById('btn1');
				var arr = [];
				for(var i=0;i<oTab.tBodies[0].rows.length;i++){
					arr.push(oTab.tBodies[0].rows[i]);
						
				}
				
				arr.sort(function(tr1,tr2){
					var td1 = parseInt(tr1.cells[0].innerHTML);
					var td2 = parseInt(tr2.cells[0].innerHTML);
					return  td1 - td2 ;
				});
				
				oBtn.onclick = function(){
					for(var i=0;i<arr.length;i++){
						oTab.tBodies[0].appendChild(arr[i]);
					}
					
					
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="排序" />
		<table border="1px" width="300px" id="tab1">
			<tHead>
				<tr>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</tHead>
			<tBody>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr>
					<td>6</td>
					<td>刘小二</td>
					<td>36</td>
				</tr>
				
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>50</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Json</td>
					<td>27</td>
				</tr>
				<tr>
					<td>5</td>
					<td>王小七</td>
					<td>30</td>
				</tr>
				
			</tBody>
		</table>
		
	</body>
</html>