Javascript DOM练习06

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript DOM练习06</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	@import url("table.css");
	</style>
  </head>
  
  <body>
  		<script type="text/javascript">
  		var flag = true;
		function sortTable(){
			/*
			 * 思路:
			 * 1,排序就需要数组。获取需要参与排序的行对象数组。
			 * 2,对行数组中的每一个行的年龄单元格的数据进行比较,并完成行对象在数组中的位置置换。
			 * 3,将排好序的数组重新添加回表格。
			 */
			var oTabNode = document.getElementById("info");
			var collTrNodes = oTabNode.rows;
			//定义一个容器,存储需要排序行对象。
			var trArr = [];
			//遍历原行集合,并将需要排序的行对象存储到容器中。
			for (var x = 1; x < collTrNodes.length; x++) {
				trArr[x - 1] = collTrNodes[x];
			}
			//对临时容器排个序。
			mySort(trArr);
			//将排完序的行对象添加会表格。
			if (flag) {
				for (var x = 0; x < trArr.length; x++) {
					trArr[x].parentNode.appendChild(trArr[x]);
				}
				flag = false;
			} else {
				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++) {
					//按照年龄数值排序,并转成整数。
					if (parseInt(arr[x].cells[1].innerHTML) > parseInt(arr[y].cells[1].innerHTML)) {
						var temp = arr[x];
						arr[x] = arr[y];
						arr[y] = temp;
					}
				}
			}
		}
		</script>
		
		<table id="info">
		<tr>
			<th>姓名</th>
			<th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
			<th>地址</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>27</td>
			<td>上海</td>
		</tr>
		<tr>
			<td>小强</td>
			<td>6</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>
table {
	border: #249bdb 1px solid;
	width: 500px;
	border-collapse: collapse;
}

table td {
	border: #249bdb 1px solid;
	padding: 10px;
}

table th {
	border: #249bdb 1px solid;
	padding: 10px;
	background-color: rgb(200, 200, 200);
}

th a:link,th a:visited {
	color: #279bda;
	text-decoration: none;
}


你可能感兴趣的:(Javascript DOM练习06)