一：表格排序效果，根據點擊表格頭部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>