首页 > 代码库 > 使用JS实现表格排序
使用JS实现表格排序
功能：点击姓名、力量、智慧时，实现列排序。
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
使用JS实现表格排序
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。