功能：點擊姓名、力量、智慧時，實現列排序。
HTML：
<!DOCTYPE html> <html> <head> <style type="text/css"> #tb{ border: 1px solid #ddd; } #tb tbody td{ border: 1px solid #ddd; } </style> <meta charset="utf-8"> <title></title> </head> <body> <table id="tb"> <thead> <tr> <th>姓名</th> <th>力量</th> <th>智慧</th> </tr> </thead> <tbody> <tr> <td>安德烈</td> <td>2</td> <td>24</td> </tr> <tr> <td>德魯伊</td> <td>5</td> <td>2</td> </tr> <tr> <td>浪客劍心</td> <td>1</td> <td>6</td> </tr> </tbody> </table> </body> </html>
JS：
var table=document.getElementById("tb"); var table_th=document.getElementsByTagName("th"); var table_tbody=table.getElementsByTagName("tbody")[0]; var table_tr=table_tbody.getElementsByTagName("tr"); function bind_click(_i){ table_th[_i].onclick=function(){ var temp_arr=[]; var temp_tr_arr=[]; for(j=0;j<table_tr.length;j++){ temp_arr.push(table_tr[j].getElementsByTagName("td")[_i].innerHTML); temp_tr_arr.push(table_tr[j].cloneNode(true)); }; var tr_length=table_tr.length for(x=0;x<tr_length;x++){ table_tbody.removeChild(table_tbody.getElementsByTagName("tr")[0]); } 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++){ bind_click(i); }
實現思想很簡單：
1.為每一個表頭綁定一個click事件，傳入序列號i；
2.click事件中，用臨時數組temp_arr保存被點擊的表頭對應的列內容，temp_tr_arr保存臨時tr數組；
3.刪掉原來的tr；
4.對temp_arr中的數據排序；
5.根據排序結果append(tr)；
temp_arr