js實現成績排序

在頁面上有如下表格,當點擊成績時,所有行數根據成績進行從低到高排序,再點擊則從高到低排序,請用javascript實現以上功能。

姓名 性別 成績
張三 77
李四 87
王五 未知 50

js代碼如下所示:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>成績排序</title>
</head>
<body>
	<table id="tableSort">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性別</th>
				<th id="mark">成績</th>
			</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>
	<script type="text/javascript">
		var tbody = document.getElementById('tableSort').tBodies[0];             //獲取tbody
		var mark  =document.getElementById('tableSort').tHead.rows[0].cells[2];  // 獲取成績元素
		var flag  =1;
		mark.οnclick=function(){                                                 //點擊成績單元格,進行排序
			var arr=[];
			for (var i = 0,len=tbody.rows.length; i < len; i++) {                //將每一行的數據存放進數組arr中
                    arr.push(tbody.rows[i]);
            }
             arr.sort(function(a,b){                                            //進行成績排序
                 var sort=flag*(a.cells[2].innerHTML - b.cells[2].innerHTML);  
                 return sort;       
            }); 
            flag=-flag; 
			for (var i = 0,len=tbody.rows.length; i < len; i++) {              //排序後,重新添加進表格
                    tbody.appendChild(arr[i]);
            }
		}
	</script>
</body>
</html>


發佈了21 篇原創文章 · 獲贊 16 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章