在頁面上有如下表格,當點擊成績時,所有行數根據成績進行從低到高排序,再點擊則從高到低排序,請用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>