Skip to content

Latest commit

 

History

History
129 lines (110 loc) · 2.44 KB

表格排序.md

File metadata and controls

129 lines (110 loc) · 2.44 KB
Raw

表格排序

演示

//table2.css
table {

	border: #FB0202 solid 2px;
}

table td {

	border: #2A09EF solid 1px;
	padding: 10px;
}
table th {

	border: #2A09EF solid 1px;
	padding: 10px;
	background-color: #F907D4;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="CSS/table2.css">
	<style type="text/css">
		th a:link,th a:visited {
			color: #C008F8;
			text-decoration: none;
		}
	</style>
	<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++) {

				 	// oTabNode.childNodes[0].appendChild(trArr[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>
</head>
<body>
	<table id="info">
		<tr>
			<th>Name</th>
			<th><a href="javascript:void(0)" onclick="sortTable()">Age</a></th>
			<th>Address</th>
		</tr>
		<tr>
			<td>Jack</td>
			<td>30</td>
			<td>Shanghai</td>
		</tr>
		<tr>
			<td>Jacky</td>
			<td>20</td>
			<td>Taiwan</td>
		</tr>
		<tr>
			<td>Vivian</td>
			<td>50</td>
			<td>Hong Kong</td>
		</tr>
		<tr>
			<td>Jervis</td>
			<td>40</td>
			<td>Beijing</td>
		</tr>
		<tr>
			<td>Mike</td>
			<td>10</td>
			<td>Suzhou</td>
		</tr>
	</table>
</body>
</html>