javascript小练习之给表格中数据排序

最新推荐文章于 2021-06-16 19:38:29 发布

小猴子豆芽菜

最新推荐文章于 2021-06-16 19:38:29 发布

阅读量563

点赞数 1

分类专栏： JavaScript 文章标签： javascript 表格数据排序

本文链接：https://blog.csdn.net/XU906722/article/details/79116877

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

需求：点击表头，对表格中数据进行排序。

基本思路：

1.获取表格中所有行对象；

2.将行对象存入数组，并对数组进行排序；

3.将排完序的数组中数据重新存入表格中；

实例效果：

排序前：

排序后：

<html>
	<head>
		<link rel="stylesheet" href="tableData.css" />
		
		<script type="text/javascript">
			/*
			表格按照年龄排序：
				1.每个人的信息是一行
					①先将行去除，临时存入数组中
				2.对数组中的行对象的一个单元格进行排序
				3.将排序后的对象重新存入表格中
			*/
			
			function sortData(){
				//1.获取表格中的所有行对象
				var tabNode=document.getElementsByTagName("table")[0];
				var trs=tabNode.rows;

				//2.定义临时容器，将表格中需要参与排序的行对象进行临时存储
				//其中存储的其实都是对象的引用
				var arr= new Array();
				for(var x=1;x<trs.length;x++){
					arr[x-1]=trs[x];
				}	
				
				//3.对数组中的数据进行排序
				sort(arr);
				
				var tbNode=tabNode.childNodes[0];
// 				alert(tbNode.nodeName);
				
				//4.将排完序的数组存放如表格中
				for(var x=0;x<arr.length;x++){
					//append是将数据往尾部添加
					tbNode.appendChild(arr[x]);							
					
				}
							
			}
			
			function sort(arr){
				for(var x=0;x<arr.length;x++){
					for(var y=x+1;y<arr.length;y++){
						if(arr[x].cells[1].innerHTML>arr[y].cells[1].innerHTML){
							var temp = arr[x];
							arr[x]=arr[y];
							arr[y]=temp;
						}
					}
				}
			
			}
			
		</script>
		
	</head>

	<body>
		<table>
		<tr>
			<th>姓名</th>
			<th><a href="javascript:void(0)" οnclick="sortData()">年龄</a></th>
			<th>地址</th>
		</tr>
		
		<tr>
			<td>赵倩</td>
			<td>20</td>
			<td>西安</td>
		</tr>

		<tr>
			<td>张三</td>
			<td>30</td>
			<td>北京</td>
		</tr>
				
		<tr>
			<td>李四</td>
			<td>33</td>
			<td>上海</td>
		</tr>	
		
		<tr>
			<td>王曦</td>
			<td>18</td>
			<td>深圳</td>
		</tr>	
		</table>
	
	</body>
</html>

小猴子豆芽菜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript小练习之给表格中数据排序

需求：点击表头，对表格中数据进行排序。基本思路： 1.获取表格中所有行对象；2.将行对象存入数组，并对数组进行排序；3.将排完序的数组中数据重新存入表格中；实例效果：排序前：排序后： /* 表格按照年龄排序： 1.每个人的信息是一行 ①先将行去除，临时存入数组中 2.对数组中的行对
复制链接

扫一扫