js table表格排序

一：表格排序效果，根据点击表格头部th进行排序，如图：
二：示例代码，如下：
<!DOCTYPE html>
<html>


	<head>
		<style type="text/css">
			#tb1 {
				border: 1px solid #ddd;
			}
			#tb1 thead th{
				width: 60px;
			}
			#tb1 tbody td {
				border: 1px solid #ddd;
				width: 60px;
				text-align: center;
				box-sizing: border-box;
			}
		</style>
		<meta charset="utf-8">
		<title></title>
	</head>


	<body>
		<table id="tb1">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>平均分</th>
					<th>总分</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小红</td>
					<td>21</td>
					<td>24</td>
					<td>16</td>
				</tr>
				<tr>
					<td>小强</td>
					<td>23</td>
					<td>2</td>
					<td>19</td>
				</tr>
				<tr>
					<td>小明</td>
					<td>14</td>
					<td>50</td>
					<td>24</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			//获取table表格,获取th,获取tbody下的tr
			var table = document.getElementById("tb1");
			var table_th = document.getElementsByTagName("th");
			var table_tbody = table.getElementsByTagName("tbody")[0];
			var table_tr = table_tbody.getElementsByTagName("tr");
			function itemClick(i) {//i表示点击单个th
				table_th[i].onclick = function() {
					var temp_arr = [];//存放每个th对应的内容，根据内容进行排序
					var temp_tr_arr = [];//存放每个th对应内容的行
					for(j = 0; j < table_tr.length; j++) {
						if(table_tr[j].getElementsByTagName("td")[i].innerHTML==' '){
							temp_arr.push('0')
						}else{
							temp_arr.push(table_tr[j].getElementsByTagName("td")[i].innerHTML);
						}
						temp_tr_arr.push(table_tr[j].cloneNode(true));
					};
					//清空tbody内容
					table_tbody.innerHTML='';
					var temp = parseInt(temp_arr[0]) || temp_arr[0];
					//定义排序方式
					if(typeof(temp) == 'number') {
						temp_arr.sort(function(a, b) { return a - b; });
					} else {
						temp_arr.sort();
					}
					//重新进行排序
					for(k = 0; k < temp_arr.length; k++) {
						for(vv = 0; vv < temp_tr_arr.length; vv++) {
							if(temp_arr[k] == temp_tr_arr[vv].getElementsByTagName("td")[i].innerHTML) {
								table_tbody.appendChild(temp_tr_arr[vv]);
							}
						}
					}
				}
			}
			for(i = 0; i < table_th.length; i++) {
				itemClick(i);
			}
		</script>
	</body>


</html>
猜你喜欢
