javascript 위젯 기본 테이블 정렬 테이블 스크립트(예: Firefox Opera Chrome과 호환 가능)_javascript 기술

먼저 sort.html로 html 페이지를 만들고 다음 내용을 페이지에 복사하세요.

코드 복사 코드는 다음과 같습니다. 🎜>

제목 없는 문서 .desc 범위{ 디스플레이: 없음;} .asc em{ 디스플레이: 없음;}

ID | - name | -

행복하세요 3 > 5 /tbody>

ID | - name | -

&lt ; /thead> 1 🎜> 3 열기 >

새 스크립트 페이지 sort.js >

코드 복사

코드는 다음과 같습니다. /* 테이블 정렬 기능 이벤트: 2012 7 24 DOM 노드 테이블을 정렬해야 하는 경우 테이블 속성에 sort="true"를 추가하세요. ID는 유일하고 필요한 것입니다 이 js 파일은 직접 가져올 수 있습니다 생성된 저장소에는 설명이 없기 때문에 ID | - name | -&gt ;

> 행복하세요 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 if(table_arr[i].getAttribute("sort")){ Core.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: 함수 (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" : 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. 행[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.onload=Core.init;

javascript 위젯 기본 테이블 정렬 테이블 스크립트(예: Firefox Opera Chrome과 호환 가능)_javascript 기술

관련 기사