javascript 작은 구성 요소 원생 table 정렬 표 스 크 립 트 (i Firefox opera chrome 호 환)

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  





















 
  
 
  
 
  
ID|-
 
  
name|-
 
  
 
  
 
  
 
  
 
  
1
 
  
  
 
  
 
  
 
  
3
 
  
  
 
  
 
  
 
  
5
 
  
  
 
  
 
  
 
  
 
  





















 
  
 
  
 
  
ID|-
 
  
name|-
 
  
 
  
 
  
 
  
 
  
1
 
  
  
 
  
 
  
 
  
3
 
  
  
 
  
 
  
 
  
5
 
  
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 

 
  
/* 
  
       
  
  ：2012 7 24 
  
DOM    
  
                  sort="true" 
  
   id          
  
 js         
  
             
  





















 
  
 
  
 
  
ID|-
 
  
name|-
 
  
 
  
 
  
 
  
 
  
1
 
  
  
 
  
 
  
 
  
3
 
  
  
 
  
 
  
 
  
5
 
  
  
 
  
 
  
 
  
 
  
*/ 
  
var Core = (function(window){ 
  
return { 
  
init: function(){ 
  
Core.getTableById(); 
  
Core.setHeadClick(); 
  
}, 
  
I: function(id){ 
  
return document.getElementById(id); 
  
}, 
  
N: function(name){ 
  
return document.getElementsByTagName(name); 
  
}, 
  
config: { 
  
arr:[] 
  
}, 
  
getTableById: function(){ 
  
var table_arr=Core.N("table"); 
  
for(var i = 0; i < table_arr.length; i++){ 
  
if(table_arr[i].getAttribute("sort")){ 
  
Core.config.arr.push(table_arr[i].getAttribute("id")); 
  
} 
  
} 
  
//alert(Core.config.arr) 
  
}, 
  
setHeadClick: function(){ 
  
var arr = Core.config.arr; 
  
if(!arr.length) return false; 
  
for(var j = 0 ; j< arr.length;j++){ 
  
var thead = Core.I(arr[j]).getElementsByTagName("thead")[0].getElementsByTagName("td"); 
  
for(var i = 0; iif(thead[i].attachEvent){ 
  
thead[i].attachEvent("onclick",Core.sortList) 
  
}else{ 
  
thead[i].addEventListener("click",Core.sortList,false) 
  
} 
  
//if(i==0){ 
  
// thead[i].click(); 
  
// } 
  
} 
  
} 
  
}, 
  
sortList: function(e){ 
  
var index=0,arr=[],sort="asc",table=null; 
  
if(e.srcElement){ 
  
index=e.srcElement.cellIndex; 
  
sort=e.srcElement.getAttribute("sort"); 
  
e.srcElement.className=sort == "asc" ? "desc" : "asc"; 
  
e.srcElement.setAttribute("sort", sort == "asc" ? "desc" : "asc"); 
  
table = Core.getTableId(e.srcElement) 
  
}else{ 
  
index=e.currentTarget.cellIndex; 
  
sort=e.currentTarget.getAttribute("sort"); 
  
e.currentTarget.className=sort == "asc" ? "desc" : "asc"; 
  
e.currentTarget.setAttribute("sort", sort == "asc" ? "desc" : "asc"); 
  
table = Core.getTableId(e.currentTarget) 
  
} 
  
Core.getList(table,index,arr); 
  
Core.updateList(table,sort,arr); 
  
}, 
  
getTableId: function(p){ 
  
for(var i=0,n=p;n=n.parentNode;i++){ 
  
if(i>100) break; 
  
if(n.nodeName=="TABLE"){ 
  
//alert(n.nodeName/*n.getAttribute("id")*/) 
  
return n; 
  
} 
  
} 
  
}, 
  
getList: function (table,index,arr){ 
  
var table = table.getElementsByTagName("tbody")[0]; 
  
for(var i = 0; i< table.rows.length; i++){ 
  
var item = table.rows[i]; 
  
for(var j = 0; j< item.cells.length;j++){ 
  
var jtem = item.cells[index]; 
  
if(jtem.innerHTML){ 
  
//alert(jtem.innerHTML) 
  
arr[i]=jtem.innerHTML; 
  
} 
  
break; 
  
} 
  
} 
  
}, 
  
updateList: function (table,sort,arr){ 
  
var table = table.getElementsByTagName("tbody")[0]; 
  
for(var i = 0; i< arr.length;i++){ 
  
for(var j = i+1;j< arr.length;j++){ 
  
if(sort=="asc"){ 
  
if(arr[i] > arr[j]){ 
  
var rwos=table.rows[i].cloneNode(true); 
  
table.replaceChild(table.rows[j],table.rows[i]); 
  
if(j+1==arr.length){ 
  
//table.insertBefore(rwos,null); 
  
table.appendChild(rwos) 
  
}else{ 
  
table.insertBefore(rwos,table.rows[j]); 
  
} 
  
var tim= arr[i]; 
  
arr.splice(i,1,arr[j]); 
  
arr.splice(j,1,tim); 
  
} 
  
}else{ 
  
if(arr[i] < arr[j]){ 
  
var rwos=table.rows[i].cloneNode(true); 
  
table.replaceChild(table.rows[j],table.rows[i]); 
  
if(j+1==arr.length){ 
  
//table.insertBefore(rwos,null); 
  
table.appendChild(rwos) 
  
}else{ 
  
table.insertBefore(rwos,table.rows[j]); 
  
} 
  
var tim= arr[i]; 
  
arr.splice(i,1,arr[j]); 
  
arr.splice(j,1,tim); 
  
} 
  
} 
  
} 
  
} 
  
} 
  
}; 
  
})(window); 
  
window.onload=Core.init;