JavaScript高级程序设计阅读笔记（十九） js表格排序

　　排序代码

复制代码代码如下:

　　function SortTable(sTableID, iCol, sDataType){

　　this.oTable=document.getElementById(sTableID);

　　this.oTBody=this.oTable.tBodies[0];

　　this.colDataRows=this.oTBody.rows;

　　this.aTRs=[];

　　this.iCol=iCol;

　　this.sDataType=sDataType;

　　}

　　SortTable.prototype={

　　convert:function(sValue, sDataType){

　　switch(sDataType){

　　case "int":

　　return parseInt(sValue);

　　case "float":

　　return parseFloat(sValue);

　　case "date":

　　return new Date(sValue);

　　default:

　　return sValue.toString();

　　}

　　generateCompareTRs:function(iCol, sDataType, that){

　　return function compareTRs(oTR1,oTR2){

　　var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType),

　　vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

　　if(vValue1 < vValue2){

　　return -1;

　　} else if(vValue1 > vValue2){

　　return 1;

　　} else{

　　return 0;

　　}

　　};

　　sort:function(){

　　for(var i=0,l=this.colDataRows.length;i<l;i++){

　　this.aTRs.push(this.colDataRows[i]);

　　}

　　if(this.oTable.sortCol === this.iCol){

　　this.aTRs.reverse();

　　} else {

　　this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this));

　　}

　　var oFragment=document.createDocumentFragment();

　　for(var i=0,l=this.aTRs.length;i<l;i++){

　　oFragment.appendChild(this.aTRs[i]);

　　}

　　this.oTBody.appendChild(oFragment);

　　this.oTable.sortCol = this.iCol;

　　}

　　调用示例

复制代码代码如下:

　　function bindSortTable(sTableID, iCol, sDataType){

　　var table=document.getElementById(sTableID),

　　ftr=table.tHead.rows[0],

　　tds=ftr.cells;

　　if(tds[iCol]){

　　tds[iCol].onclick=function(){

　　var sortTable=new SortTable(sTableID, iCol, sDataType);

　　sortTable.sort();

　　}

　　window.onload=function(){

　　bindSortTable("tblSort",0);

　　bindSortTable("tblSort",1);

　　bindSortTable("tblSort",2,"int");

　　bindSortTable("tblSort",3,"float");

　　bindSortTable("tblSort",4,"date");

　　}

　　完整Demo:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>JSCode demo</title> 
<style type="text/css"> 
table{ 
border-collapse:collapse; 
} 
table thead tr{ 
cursor:pointer; 
background:#EEE; 
} 
td{ 
border:1px solid #CCC; 
padding:10px; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20SortTable(sTableID%2C%20iCol%2C%20sDataType)%7B%20%0D%0Athis.oTable%3Ddocument.getElementById(sTableID)%3B%20%0D%0Athis.oTBody%3Dthis.oTable.tBodies%5B0%5D%3B%20%0D%0Athis.colDataRows%3Dthis.oTBody.rows%3B%20%0D%0Athis.aTRs%3D%5B%5D%3B%20%0D%0Athis.iCol%3DiCol%3B%20%0D%0Athis.sDataType%3DsDataType%3B%20%0D%0A%7D%20%0D%0ASortTable.prototype%3D%7B%20%0D%0Aconvert%3Afunction(sValue%2C%20sDataType)%7B%20%0D%0Aswitch(sDataType)%7B%20%0D%0Acase%20%22int%22%3A%20%0D%0Areturn%20parseInt(sValue)%3B%20%0D%0Acase%20%22float%22%3A%20%0D%0Areturn%20parseFloat(sValue)%3B%20%0D%0Acase%20%22date%22%3A%20%0D%0Areturn%20new%20Date(sValue)%3B%20%0D%0Adefault%3A%20%0D%0Areturn%20sValue.toString()%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AgenerateCompareTRs%3Afunction(iCol%2C%20sDataType%2C%20that)%7B%20%0D%0Areturn%20function%20compareTRs(oTR1%2CoTR2)%7B%20%0D%0Avar%20vValue1%3D%20that.convert(oTR1.cells%5BiCol%5D.firstChild.nodeValue%2C%20sDataType)%2C%20%0D%0AvValue2%3D%20that.convert(oTR2.cells%5BiCol%5D.firstChild.nodeValue%2C%20sDataType)%3B%20%0D%0Aif(vValue1%20%3C%20vValue2)%7B%20%0D%0Areturn%20-1%3B%20%0D%0A%7D%20else%20if(vValue1%20%3E%20vValue2)%7B%20%0D%0Areturn%201%3B%20%0D%0A%7D%20else%7B%20%0D%0Areturn%200%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%7D%2C%20%0D%0Asort%3Afunction()%7B%20%0D%0Afor(var%20i%3D0%2Cl%3Dthis.colDataRows.length%3Bi%3Cl%3Bi%2B%2B)%7B%20%0D%0Athis.aTRs.push(this.colDataRows%5Bi%5D)%3B%20%0D%0A%7D%20%0D%0Aif(this.oTable.sortCol%20%3D%3D%3D%20this.iCol)%7B%20%0D%0Athis.aTRs.reverse()%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Athis.aTRs.sort(this.generateCompareTRs(this.iCol%2C%20this.sDataType%2C%20this))%3B%20%0D%0A%7D%20%0D%0Avar%20oFragment%3Ddocument.createDocumentFragment()%3B%20%0D%0Afor(var%20i%3D0%2Cl%3Dthis.aTRs.length%3Bi%3Cl%3Bi%2B%2B)%7B%20%0D%0AoFragment.appendChild(this.aTRs%5Bi%5D)%3B%20%0D%0A%7D%20%0D%0Athis.oTBody.appendChild(oFragment)%3B%20%0D%0Athis.oTable.sortCol%20%3D%20this.iCol%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20bindSortTable(sTableID%2C%20iCol%2C%20sDataType)%7B%20%0D%0Avar%20table%3Ddocument.getElementById(sTableID)%2C%20%0D%0Aftr%3Dtable.tHead.rows%5B0%5D%2C%20%0D%0Atds%3Dftr.cells%3B%20%0D%0Aif(tds%5BiCol%5D)%7B%20%0D%0Atds%5BiCol%5D.onclick%3Dfunction()%7B%20%0D%0Avar%20sortTable%3Dnew%20SortTable(sTableID%2C%20iCol%2C%20sDataType)%3B%20%0D%0AsortTable.sort()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0AbindSortTable(%22tblSort%22%2C0)%3B%20%0D%0AbindSortTable(%22tblSort%22%2C1)%3B%20%0D%0AbindSortTable(%22tblSort%22%2C2%2C%22int%22)%3B%20%0D%0AbindSortTable(%22tblSort%22%2C3%2C%22float%22)%3B%20%0D%0AbindSortTable(%22tblSort%22%2C4%2C%22date%22)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<table id="tblSort"> 
<thead> 
<tr> 
<td>Last Name</td> 
<td>First Name</td> 
<td>Number</td> 
<td>Score</td> 
<td>Birthday</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>O</td> 
<td>D</td> 
<td>5</td> 
<td>20.1</td> 
<td>7/12/1999</td> 
</tr> 
<tr> 
<td>P</td> 
<td>C</td> 
<td>3</td> 
<td>30.1</td> 
<td>7/12/1990</td> 
</tr> 
<tr> 
<td>Q</td> 
<td>B</td> 
<td>4</td> 
<td>27.1</td> 
<td>7/12/1995</td> 
</tr> 
<tr> 
<td>R</td> 
<td>A</td> 
<td>2</td> 
<td>24.1</td> 
<td>7/12/1998</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　作者：Artwl

　　出处：http://artwl.cnblogs.com

教程首页更多教程

JavaScript高级程序设计 阅读笔记（十九） js表格排序

JavaScript高级程序设计阅读笔记（十九） js表格排序