首页 > 代码库 > 表格排序
表格排序
数组中有一个sort方法，用于数组排序，sort可以接收一个参数，指明比较函数。
定义比较函数
//比较函数
function compareFun(value1,value2){ if(value1 > value2){ return 1; }else if(value1 < value2){ return -1; }else { return 0; } }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" type=‘image/x-icon‘ href=http://www.mamicode.com/"img/tab.ico"> <title>表格排序</title> <style> #tabSort tr{text-align: center} #tabSort th{cursor: pointer} #tabSort img{ width:32px; height:32px; } </style></head><body><h5>表格排序</h5><table id=‘tabSort‘ border=1> <thead> <tr> <th onclick="sortTable(‘tabSort‘,0,‘string‘)">name</th> <th onclick="sortTable(‘tabSort‘,1,‘int‘)">age</th> <th onclick="sortTable(‘tabSort‘,2,‘date‘)">birthday</th> <th onclick="sortTable(‘tabSort‘,3)">details</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>22</td> <td>1993-5-5</td> <td sortValue=http://www.mamicode.com/‘png‘ ><img src=http://www.mamicode.com/"img/user1.png" ></td> </tr> <tr> <td>Sunny</td> <td>21</td> <td>1994-3-3</td> <td sortValue=http://www.mamicode.com/‘png‘ ><img src=http://www.mamicode.com/"img/user2.png" ></td> </tr> <tr> <td>Jenny</td> <td>23</td> <td>1992-2-2</td> <td sortValue=http://www.mamicode.com/‘jpeg‘ ><img src=http://www.mamicode.com/"img/user3.jpeg" ></td> </tr> <tr> <td>Sara</td> <td>25</td> <td>1990-12-12</td> <td sortValue=http://www.mamicode.com/‘bmp‘ ><img src=http://www.mamicode.com/"img/user4.bmp" ></td> </tr> <tr> <td>Coco</td> <td>24</td> <td>1991-1-1</td> <td sortValue=http://www.mamicode.com/‘jpeg‘ ><img src=http://www.mamicode.com/"img/user5.jpeg" ></td> </tr> </tbody></table><script>function sortTable(tabId,sortCol,dataType){ var tab=document.getElementById(tabId); var tBody=tab.tBodies[0]; var tRows=tBody.rows; //获取tBody中的行 排除thead var rowArr=[]; //tRows不是真正的数组，不能直接使用sort（Array的方法）函数,所以先存成数组 for(var i=0,len=tRows.length;i<len;i++){ rowArr[i] = tRows[i]; } //对各行进行排序 if(tab.sortFlag!=sortCol){ var compFunc=getCompareFun(sortCol,dataType); rowArr.sort(compFunc); }else{ rowArr.reverse(); //已经排序过，再进行一次逆序排列 } //将排序的结果追加至表中 for(var j=0,len=rowArr.length;j<len;j++){ tBody.appendChild(rowArr[j]); // appendChild中引用的是表中行元素，只存在一个该行元素 } tab.sortFlag=sortCol;}//获取排序函数 传给sort函数function getCompareFun(colIndex,dataType){ return function compareFun(tr1,tr2){ var value1=tr1.cells[colIndex].getAttribute(‘sortValue‘); var value2=tr2.cells[colIndex].getAttribute(‘sortValue‘); if(value1==undefined || value2==undefined){ value1 = convert(tr1.cells[colIndex].firstChild.nodeValue,dataType); value2 = convert(tr2.cells[colIndex].firstChild.nodeValue,dataType); } if(value1 > value2){ return 1; }else if(value1 < value2){ return -1; }else { return 0; } }}function convert(value,dataType){ switch(dataType){ case "int": return parseInt(value); break; case "string": return value.toString(); break; case "date": return +new Date(Date.parse(value)); //转换成毫秒数 break; default: return value.toString(); }} </script> </body></html>
表格排序
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。