DOM（二）-12-(示例-表格排序)

最新推荐文章于 2019-10-06 04:53:08 发布

wy_0928

最新推荐文章于 2019-10-06 04:53:08 发布

阅读量341

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810861

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

表格样式table.css代码

@CHARSET "UTF-8";

table{
	border:##249bdb 1px solid;
	width:500px;
	border-collapse:collapse;	
}

table td{
	border:#249bdb 1px solid;
	padding:5px;/*td左边顶格*/
}
table th{
	border:#249bdb 1px solid;
	padding:5px;
	background-color: rgb(200,200,200);/*可以通过这种方式设置背景色*/
}

主程序代码

<!--
需求：对表格的“年龄”一列升序或降序排列
-->

<html>
	<head>
		<style type="text/css">
			@import url(table.css);
			th a:link,th a:visited{/*超链接点击前和点击后效果一样*/
				color:#279dba;
				text-decoration:none;
			}
		</style>
		<script type="text/javascript">
		
			var flag = true;//定义标记，为了实现鼠标点第1次升序排序，点第2次降序排序，即鼠标不停点，升序降序来回切换
			function sortTable(){
				
				/*
				 *排序的思路：
				 *1.排序就需要数组。获取需要参与排序的行对象数组。
				 *2.对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组
				 *中的位置置换。
				 *3.将排好序的数组重新添加回表格。
				 */
				var oTabNode = document.getElementById("info");
				
				var collTrNodes = oTabNode.rows;
				
				//定义一个临时容器，存储需要排序行对象。
				var trArr = [];
				
				//遍历原行集合，并将需要排序的行对象存储到临时容器中。
				for(var x=1;x<collTrNodes.length;x++){//【注意】这里从序号为1的行（第2行）开始，因为表格第1行是“年龄”
					//不需要排序，而第2行开始一直到最后都需要被排序，且表格行序号是从0开始的，所以这里x初值为1。
					
					trArr[x-1] = collTrNodes[x];//数组第一个元素角标是0，所以x-1，而我们要拿的是第2行节点对象，所以x
			
				}//临时容器trArr中存储的都是行节点对象，所以不能用以往数组排序的方法。
				
				//对临时容器排个序，【注意】“年龄”比较完后，应该是正行换位置
				mySort(trArr);
	
				/*
				 *将排完序的行对象添加回表格：此时临时容器trArr中所有tr节点对象已经按照“年龄”从小到大排列。
				 */
				if(flag){
					/*
					 *如果flag为真，就从小到大排序，即将最小的（也就是trArr第1个节点对象先添加到tbody中，先添加的在上面），
				 	 *并将flag置为false；
				 	 */
					for(var x=0;x<trArr.length;x++){
				
						//【注意】tr的父节点是tbody，tbody的父节点才是table，即tr是table的“孙子”，所以这里不能直接用
						//代码：oTabNode.appendChild(trArr[x]);添加，因为这样做tr本来是table的“孙子”，这下变成“儿子”
						//所以先用tr找其父节点，然后用该父节点调用appendChild()方法完成添加动作
						trArr[x].parentNode.appendChild(trArr[x]);
						
					}
					
					flag = false;
					
				}else{
					/*
					 *如果flag为假，就从大到小排序，即将最大的（也就是trArr最后1个节点对象先添加到tbody中，先添加的在上面），
					 *并将flag置为true。
					 */					
					for(var x=trArr.length-1;x>=0;x--){
						
						trArr[x].parentNode.appendChild(trArr[x]);
						
					}

					flag = true;
					
				}
				
			}
			
			function mySort(arr){
				
				for(var x=0;x<arr.length-1;x++){
					
					for(var y=x+1;y<arr.length;y++){
						
			//【注意】我们比较的是行对象中角标为1的单元格，即表格每行第2个单元格中的的值
						if(parseInt(arr[x].cells[1].innerHTML) > parseInt(arr[y].cells[1].innerHTML)){
	//【特别注意】这里必须做parseInt将数值转换成int型，否则光字符串排序会有危险，若其中一个元素是3，那么会乱排，所以必须转
	  //arr[x]拿到的是行节点对象，cells拿到该行所有单元格，cells[1]拿到该行第2个单元格节点对象，innerHTML拿到该单元格中内容

							var temp = arr[x];
							arr[x] = arr[y];
							arr[y] = temp;
						}
						
					}
					
				}
				
			}	
			
		</script>
	</head>
	<body>		
		<table id="info">
			<tr>
				<th>姓名</th>
				<th><a href="javascript:void(0)" οnclick="sortTable()">年龄</a></th>
				<th>地址</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>3</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>小强</td>
				<td>26</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>29</td>
				<td>广州</td>
			</tr>
			<tr>
				<td>孙八</td>
				<td>23</td>
				<td>南京</td>
			</tr>
			<tr>
				<td>二麻子</td>
				<td>24</td>
				<td>大连</td>
			</tr>
			<tr>
				<td>犀利姐</td>
				<td>32</td>
				<td>青岛</td>
			</tr>
			<tr>
				<td>旺财</td>
				<td>19</td>
				<td>深圳</td>
			</tr>
			<tr>
				<td>周七</td>
				<td>42</td>
				<td>铁岭</td>
			</tr>
			<tr>
				<td>毕姥爷</td>
				<td>18</td>
				<td>沈阳</td>
			</tr>
		</table>
	</body>
</html>