使用JS实现表格排序
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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实现表格排序的主要内容，如果未能解决你的问题，请参考以下文章