JavaScript-点击表格的表头进行排序
HTML如下:
<table class="heroinfo"> <thead title="点击排序"> <tr> <th>英雄</th><th>力量</th><th>敏捷</th><th>智力</th><th>移速</th> </tr> </thead> <tbody> <tr> <td>英雄1</td><td>28</td><td>32</td><td>20</td><td>300</td> </tr> <tr> <td>英雄2</td><td>29</td><td>22</td><td>30</td><td>320</td> </tr> <tr> <td>英雄3</td><td>25</td><td>30</td><td>25</td><td>310</td> </tr> <tr> <td>英雄4</td><td>33</td><td>28</td><td>22</td><td>305</td> </tr> <tr> <td>英雄5</td><td>27</td><td>36</td><td>20</td><td>330</td> </tr> </tbody> </table>
效果如下:
一、原生JS实现:来自JS权威指南,比书上多了再次点击后逆序排列的功能
//查找表格的<th>元素,让它们可单击 function makeSortable(table) { var headers=table.getElementsByTagName("th"); for(var i=0;i<headers.length;i++){ (function(n){ var flag=false; headers[n].onclick=function(){ // sortrows(table,n); var tbody=table.tBodies[0];//第一个<tbody> var rows=tbody.getElementsByTagName("tr");//tbody中的所有行 rows=Array.prototype.slice.call(rows,0);//真实数组中的快照 //基于第n个<td>元素的值对行排序 rows.sort(function(row1,row2){ var cell1=row1.getElementsByTagName("td")[n];//获得第n个单元格 var cell2=row2.getElementsByTagName("td")[n]; var val1=cell1.textContent||cell1.innerText;//获得文本内容 var val2=cell2.textContent||cell2.innerText; if(val1<val2){ return -1; }else if(val1>val2){ return 1; }else{ return 0; } }); if(flag){ rows.reverse(); } //在tbody中按它们的顺序把行添加到最后 //这将自动把它们从当前位置移走,故没必要预先删除它们 //如果<tbody>还包含了除了<tr>的任何其他元素,这些节点将会悬浮到顶部位置 for(var i=0;i<rows.length;i++){ tbody.appendChild(rows[i]); } flag=!flag; } }(i)); } } window.onload=function(){ var table=document.getElementsByTagName("table")[0]; makeSortable(table); }
二、编写jQuery插件实现
;(function($){ $.fn.extend({ "makeSortable":function(){ var table=$(this), headers=table.find('th'); for(var i=0,len=headers.length;i<len;i++){ (function(n){ var flag=false; headers.eq(n).click(function() { var tbody=table.children('tbody').eq(0); var rows=tbody.children('tr'); rows=Array.prototype.slice.call(rows,0); rows.sort(function(row1,row2){ var val1=$(row1).children('td').eq(n).text(); var val2=$(row2).children('td').eq(n).text(); if(val1>val2){ return 1; }else if(val1<val2){ return -1; }else{ return 0; } }); if(flag){ rows.reverse(); } tbody.append(rows); flag=!flag; }); }(i)); } return this; } }); })(jQuery); $(function(){ $(".heroinfo").makeSortable(); });
两种方法均能实现点击一次实现从小到大排序,再次点击从大到小排序。