表格排序——javascript

题目：在页面上有如下表格，当点击成绩的时候，所有行数据根据成绩从低到高排序，再点击时成绩则变为从高到低排序。

第一次点击成绩后：

再次点击成绩后：

代码如下：

HTML代码部分：

<table>
    	<thead>
    	<tr>
    		<td>姓名</td>
    		<td>性别</td>
    		<td>成绩</td>
    	</tr>
    	</thead>
    	<tbody>
        <tr>
        	<td>张三</td>
    		<td>男</td>
    		<td>77</td>
        </tr>
        <tr>
        	<td>李四</td>
    		<td>女</td>
    		<td>87</td>
        </tr>
        <tr>
        	<td>王五</td>
    		<td>未知</td>
    		<td>50</td>
        </tr>
        </tbody>
</table>

CSS代码部分：

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	table{
		border: solid 1px;
		margin: 60px auto;
		width: 600px;
		border-collapse:collapse;    /*为表格设置合并边框模型*/
	        cursor: default;  /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标（通常是一个箭头）*/  
	}
	tr{
		border: solid 1px;
		height: 26px;
	}
	thead{
		border: solid 1px;
		cursor: pointer;  /*光标呈现为指示链接的指针（一只手）*/
	}
	td{
		border: solid 1px;
	}
	</style>

javascript代码部分：

<script type="text/javascript">
        window.onload = function(){
        	var tHead = document.getElementsByTagName('thead')[0];
        	var tBody = document.getElementsByTagName('tbody')[0];
        	var tHeadTd = tHead.getElementsByTagName('td');
        	var rlen = tBody.rows.length;         //获取tbody中的行数
        	var clen = tBody.rows[0].cells.length;        //获取tbody中的每行的列数
        	var arr = [];
        	for(var i = 0; i < rlen; i ++){
        		arr[i] = tBody.rows[i];        //把tbody中的内容以行的形式放到数组arr中
        		
        	}

        	var count = 0;    //记录点击的次数(第一次点击，升序排列；再次点击，降序排列)
        	tHeadTd[2].onclick = function(){       //当点击“成绩”单元格时

          		if(count == 0){
        			sortUp(arr,2);
        			count = 1;
        		}else{
        			sortDown(arr,2);
        			count = 0;
        		}
        		var str = "";
        		var html = "";
        		console.log(arr);
        		for(var j = 0; j < arr.length; j ++){    //遍历arr数组的每一行
        			for(var k = 0; k < clen; k ++){    //遍历arr数组每一行的长度
        				str += "<td>" + arr[j].children[k].innerText + "</td>";  //获取排序后每行每个单元格的内容
        			}
        			html += "<tr>" + str + "</tr>";    //把每个单元格放到行内，并把每行<tr>赋给html
        			str = "";
        		}
        		tBody.innerHTML = html;     //把html内容添加到表格tbody中
        	}

        	//数字升序
        	function sortUp(arr,n){
        		arr.sort(function(a,b){
        			return a.children[n].innerText - b.children[n].innerText;
        		});
        	}

        	//数字降序
        	function sortDown(arr,n){
        		arr.sort(function(a,b){
        			return b.children[n].innerText - a.children[n].innerText;
        		});
        	}
        }
    </script>