먼저 sort.html로 html 페이지를 만들고 다음 내용을 페이지에 복사하세요. 코드 복사 코드는 다음과 같습니다. 🎜> 제목 없는 문서 <br>.desc 범위{ 디스플레이: 없음;} <br>.asc em{ 디스플레이: 없음;} <br>< ;/ 스크립트> <br></head> <br><body> <br><table width="200" border="1" cellpadding="0" sort="true" id= "mytab"> <br><thead style="cursor:pointer"> <br><tr> <br><td class="desc">ID<span>|</ 범위><em>-</em></td> <br><td class="desc"> <br> </td> <tr> <br> <td>행복하세요</td> <br><tr> <br><td>3</td> ></tr> <br><tr> <br><td>5</td><br></td> /tbody> <br></table> <br><table width="200" border="1" sort="true" id="mytabs"> <br><thead style="cursor: 포인터"> <br><tr> <br><td class="desc">ID<span>|</span><em>-</em></td> <br><td class="desc">name<span>|</span><em>-</em></td> <br></tr> <br>< ; /thead> <br><tbody> <br><td>1</td> <br></td> 🎜><tr> <br><td>3</td> <br><td>열기</td> ></tbody> <br></table> <br></html> <br><br>새 스크립트 페이지 sort.js ><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><div class="codebody" id="code93868"> <br>/* <br>테이블 정렬 기능<br>이벤트: 2012 7 24 <br>DOM 노드<br>테이블을 정렬해야 하는 경우 테이블 속성에 sort="true"를 추가하세요. <br>ID는 유일하고 필요한 것입니다<br>이 js 파일은 직접 가져올 수 있습니다<br>생성된 저장소에는 설명이 없기 때문에<br><table width="200" border="1" sort="true " id="mytab" > <br><thead style="cursor:pointer"> <br><tr> <br><td class="desc">ID<span>|< /span><em>-</em></td> <br><td class="desc"></thead> <br><tr> <br></td> ><td>행복하세요</td> <br><tr><br> </td> <td><td>5</td> <br></td> <br></td> <br></table> / <br>var Core = (function(window){ <br>return { <br>init: function(){ <br>Core.getTableById(); <br>Core.setHeadClick(); <br>}, <br>I: function(id){ <br>return document.getElementById(id); <br>}, <br>N: function(name){ <br>return document.getElementsByTagName(name); }, <br>config: { <br>arr:[] <br>}, <br>getTableById: function(){ <br>var table_arr=Core.N("table") <br>for(var i = 0; i < table_arr.length; i ){ <BR>if(table_arr[i].getAttribute("sort")){ <BR>Core.arr.push(table_arr[i].getAttribute( "id")); <BR>} <BR>} <BR>//alert(Core.config.arr) <BR>}, <BR>setHeadClick: function(){ <BR>var arr = Core.config .arr; <BR>if(!arr.length) return false; <BR>for(var j = 0 ; j< arr.length;j ){ <BR>var thead = Core.I(arr[j]) .getElementsByTagName("thead")[0].getElementsByTagName("td"); <BR>for(var i = 0; i<thead.length;i ){ <BR>if(thead[i].attachEvent){ <BR>thead[i].attachEvent("onclick",Core.sortList) <BR>}else{ <BR>thead[i].addEventListener("click" ,Core.sortList,false) <BR>} <BR>//if(i==0){ <BR>// thead[i].click(); <BR>// } <BR>} <BR>} <BR>}, <BR>sortList: 함수 (e){ <BR>var index=0,arr=[],sort="asc",table=null <BR>if(e.srcElement){ <BR>index=e.srcElement.cellIndex; >sort=e.srcElement.getAttribute("sort"); <BR>e.srcElement.className=sort == "asc" ? "desc" : "asc" <BR>e.srcElement.setAttribute("sort" , sort == "asc" ? "desc" : "asc"); <BR>table = Core.getTableId(e.srcElement) <BR>}else{ <BR>index=e.currentTarget.cellIndex; sort=e.currentTarget.getAttribute("sort"); <BR>e.currentTarget.className=sort == "asc" ? "desc" : <BR>e.currentTarget.setAttribute("sort", sort == "asc" ? "desc" : "asc"); <BR>table = Core.getTableId(e.currentTarget) <BR>} <BR>Core .getList(table,index,arr); Core.updateList(table,sort,arr); <BR>}, <BR>getTableId: function(p){ <BR>for(var i=0,n =p;n=n.parentNode;i ){ <BR>if(i>100) break; <br>if(n.nodeName=="TABLE"){ <br>//alert(n.nodeName/* n.getAttribute("id")*/) <br>return n <br>} <br>} <br>}, <br>getList: function (table,index,arr){ <br>var table = table.getElementsByTagName("tbody")[0]; 🎜>for(var i = 0; ivar item = table.rows[i] <br>for(var j = 0; jvar jtem = item.cells[index]; <br>if(jtem.innerHTML){ <br>//alert(jtem.innerHTML ) <br>arr[i]=jtem.innerHTML; <br>} <br>break; <br>} <br>} <br>}, <br>updateList: function (table,sort,arr){ <br>var table = table.getElementsByTagName("tbody") [0]; <br>for(var i = 0; ifor(var j = i 1;jif(sort= ="asc"){ <br>if(arr[i] > arr[j]){ <br>var rwos=table.rows[i].cloneNode (true) <br>table.replaceChild(table. 행[j],table.rows[i]); <br>if(j 1==arr.length){ <br>//table.insertBefore(rwos ,null) <br>table.appendChild(rwos) <br>}else{ <br>table.insertBefore(rwos,table.rows[j]) <br>} <br>var tim= arr[i] <br>arr.splice(i,1,arr [j]); <br>arr.splice(j,1,tim); <br>} <br>}else{ <br>if(arr[i ] < arr[j]){ <br>var rwos=table.rows[i].cloneNode(true); <br>table.replaceChild(table.rows[j],table.rows[i]); if(j 1==arr.length) <br>//table.insertBefore(rwos,null); <br>table.appendChild(rwos) <br>}else{ <br>table.insertBefore(rwos ,table.rows[j]) <br>} <br>var tim= arr[i]; <br>arr.splice(i,1,arr[j]) <br>arr.splice(j, 1,tim) <br>} <br>} <br>} <br>} <br>} <br>})(창) <br>window.onload=Core.init;</td> </div> </td> </tr> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
