标签：
功能：点击姓名、力量、智慧时，实现列排序。
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
标签：
原文地址：http://www.cnblogs.com/hjy920124/p/5838087.html
