标签：
数组中有一个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="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=‘png‘ ><img src="img/user1.png" ></td> </tr> <tr> <td>Sunny</td> <td>21</td> <td>1994-3-3</td> <td sortValue=‘png‘ ><img src="img/user2.png" ></td> </tr> <tr> <td>Jenny</td> <td>23</td> <td>1992-2-2</td> <td sortValue=‘jpeg‘ ><img src="img/user3.jpeg" ></td> </tr> <tr> <td>Sara</td> <td>25</td> <td>1990-12-12</td> <td sortValue=‘bmp‘ ><img src="img/user4.bmp" ></td> </tr> <tr> <td>Coco</td> <td>24</td> <td>1991-1-1</td> <td sortValue=‘jpeg‘ ><img src="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>
标签：
原文地址：http://www.cnblogs.com/lydialee/p/4260807.html
