JavaScript高級プログラム設計読書ノート(19)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;ithis.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;ioFragment.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"); 
  
} 
  
 
 

完全デモ:
JSCode demo table｛border-collappse;｝table thead tr｛cursor:pointer;background:\21804;本本本本はEEE;td｛border:1 px sodc;padding:10 px;｝function SortTable(sblebleditID=Tattttttttttttttttbledble=Matttttttttttttttttble)は、Eddblble=Edbleddble=Edbledttttttttttttttttttttttttttt. oTable.tBodies[0];this.com DataRows=this.oTBLody.rows;this.aTRs=[];this.iCol=iCol;this.sDataType=sDataType;SortTable.prototype={ convert:function(sValue、sDataType){switttttttype){ case"int":return parseInt(sVValalalatuse))""""""{swittttttttttttttttttttttttttttttttttttttttttttfffft""""""""""""":::::::::::::::(sVVVVVdefault:return sValue.toString()},generate CompreTRs:function(iCol,sDataType,that){return function compreTRs(oTR 1,oTR 2){var vValue 1=that.co nvert(oTR 1.cells[iCol].firstChild.nodeValue、sDataType)、vValue 2=that.com nvert(oTR 2.cels[iCodedededededededededededededededededededettttttttttttttttttffffl.Vdedededededededededededededededededededededededededettttttttttttttttttttft;VValue 1 gt;vValue 2){return 1;}else{return 0;},sort:function(){for](var i=0,l=this.com DataRows.length;i<l;i＋)｛this.aTRs.psh(this.co DataRows[i]);｝iiiiiiife(this.oTable.sortCol==this.iCol){this. TRs.TRs.reverse(ststststststststststststaaaaaaattttttttttttttttttttttttshshshshshshshshsh))、{stststststststststaaaaaaaaaaaaaaaatttttttttagment=document.creat Dockment Fragment();for(var i=0,l=this.aTRs.length;i<l;i+){oFragment.apendChild(this.aTRs[i];this.oTBody.apppendChild;this.oTable.sortCol=this.iCol;｝function bindSortTable(sTable ID,iCol,sDataTypee){var table=docuttttttttttttttttttdededededededededededededetttttttttttttttttttttttttttttttttttttttttttttttttffffffffttttttttttttttttttttds[iCol].onclick=function(){var sortTable=new SortTable(sTable、iCol、sDataType);sortTable.sort()]window.onload=function(){bindSortTable("tblSort",0);bindSortTablble("tblSort",1);bindSortTablblblblble("tblSort");bindSortTablblblblblblbltttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt/1999 P C 3 30.1/12/1990 Q B 4 27.1 7/12/1995 R A 2 24.1/12/1998
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
作者:アルト
出典:http://artwl.cnblogs.com