javascript widget native table sorting table script (compatible with ie firefox opera chrome)_javascript skills

First create an html page as sort.html, and copy the following content into it

Copy code The code is as follows: Untitled Document .desc span{ display:none;} .asc em{ display:none;} ID | - name | - 1 Happy 3 Dinner 5 Open &lt ;/tbody> ID | - name | - &lt ;/thead> 1 Happy 3 > 5 Open

New script page sort.js

Copy code The code is as follows: /* Table sort function Event: 2012 7 24 DOM node If the table needs to be sorted, add sort="true" in the table attribute and the id is The only and necessary one This js file can be imported directly Because the repository created has no comments ID | name | - 1 Happy 3 /tr> 5 Open */ 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 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 var thead = Core.I(arr[j]).getElementsByTagName("thead")[0].getElementsByTagName("td"); for(var i = 0; i if(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 var item = table.rows[i]; for (var j = 0; 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 for(var j = i 1;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 ] 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;