表格排序

最新推荐文章于 2024-07-11 10:27:45 发布

koukou0419

最新推荐文章于 2024-07-11 10:27:45 发布

阅读量87

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80698495

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		div{
			width:900px;
			height:350px;
			margin-top: 100px;
			margin-left:200px;
		}
		table,td{
			border:1px solid black;
		}
		td{
			width:200px;
			height:30px;
		}
		table{
			border-collapse: collapse;
		}
		input{
			width:200px;
			height: 50px;
		}
	</style>
		
</head>
<body>
	
	<div>
		姓名：<input type="text" id="name">
		年龄：<input type="text" id="age">
		<input type="button" value="查找" id="bn1">

		<ul>
			<li>6</li>
			<li>2</li>
			<li>9</li>
			<li>10</li>
			<li>20</li>
		</ul>
		<!-- <table id='sheet' >
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>21</td>
					<td></td>

				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>王尔</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>dddd</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>Blue</td>
					<td>34</td>
					<td></td>
				</tr>
			</tbody>
		</table>
 -->
	</div>
	
	<script>
		window.onload=function(){

			var ul=document.getElementsByTagName('ul')[0];
			var li=ul.getElementsByTagName('li');
			var arr=[];
			for(var i=0;i<li.length;i++){
				arr[i]=li[i];
			}
			arr.sort(function(li1,li2){
				 var n1=parseInt(li1.innerHTML);
				 var n2=parseInt(li2.innerHTML);
				 return n1-n2;
				 

			});
			for(var j=0;j<arr.length;j++){
				ul.appendChild(arr[j]);
			}
		}

			

	</script>
		
		
</body>
</html>