콩바구니의 그림일기

테이블을 sort 하는 자바스크립트를 만들어봤습니다.

제가 이번에 만든 스크립트는 _{(언제나 그렇지만)} 인라인스타일, 인라인스크립트를 일체 사용하지 않습니다.
특정 class의 태이블을 오름차순 혹은 내림차순으로 정렬합니다.

Download

table_sort.zip

Code

javascript

1. function addLoadEvent(func) {
2.     var oldonLoad = window.onload;
3.     if (typeof window.onload != 'function') {
4.             window.onload = func;
5.     }else {
6.         window.onload = function(){
7.             oldonLoad();
8.             func();
9.         }
10.     }
11. }
12. function getElementsByClassName(clsName,parentNode) {
13.  var arr = new Array();
14.  if (parentNode == null) {
15.   var elems = document.getElementsByTagName("*");
16.  } else {
17.   var elems = parentNode.getElementsByTagName("*");
18.  }
19.  for ( var cls, i = 0; ( elem = elems[i] ); i++ ) {
20.   if ( elem.className == clsName ) {
21.    arr[arr.length] = elem;
22.   }
23.  }
24.  return arr;
25. }
26. addLoadEvent(sortTable);
27. function sortTable(){
28.     var body_el = document.getElementsByTagName("body")[0];   
29.     if (!getElementsByClassName("datatable",body_el))return false;
30.     var table_el = getElementsByClassName("datatable",body_el);
31.     for (i=0;i<table_el.length;i++){
32.         table_el[i]._tr = table_el[i].getElementsByTagName("tr");
33.         if (table_el[i]._tr[0].parentNode.nodeName!="THEAD")return false;
34.         for (j=0;j<table_el[i]._tr[0].childNodes.length;j++){
35.             if(table_el[i]._tr[0].childNodes[j].childNodes[0]){
36.                var a_el = document.createElement("a");
37.             a_el.href="#";
38.             table_el[i]._tr[0].childNodes[j].appendChild(a_el);
39.             a_el.appendChild(table_el[i]._tr[0].childNodes[j].childNodes[0]);  
40.                 table_el[i]._tr[0].childNodes[j].className = "button";
41.                 table_el[i]._tr[0].childNodes[j]._number = j;       
42.                 table_el[i]._tr[0].childNodes[j]._switch = false;
43.                 table_el[i]._tr[0].childNodes[j].onclick = function () {
44.                     for (i=0;i<this.parentNode.childNodes.length;i++){
45.                         this.parentNode.childNodes[i].className = "button";
46.                     }   
47.                     if (this._switch == false){
48.                         this._switch = true;
49.                         sortTableABC(this._number,this.parentNode.parentNode.parentNode);
50.                         this.className = "button up";
51.                         return false;
52.                     } else {
53.                         this._switch= false;
54.                         sortTableCBA(this._number,this.parentNode.parentNode.parentNode);
55.                         this.className = "button down";
56.                         return false;
57.                     }   
58.                 }
59.             }
60.         }  
61.     }
62. }
63. function sortTableABC(number,table_el){
64.  var tr_el = table_el.getElementsByTagName("tr");
65.  var txt = new Array();
66.  var txt_int = new Array();
67.  var sum = 0;
68.  for (i=1;i<tr_el.length;i++){
69.      txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;
         txt_int[i] = parseInt(txt[i]);
70.  }
71.  for (i=1;i<txt_int.length;i++){
72.       sum = sum + txt_int[i];
73.  }
74.  txt = txt.sort();
75.  if (sum>0) {
76.      for (i=1;i<txt_int.length;i++){
77.          for (j=1;j<txt_int.length;j++){
78.              if (txt_int[i]<txt_int[j]) {
79.                  var temp = txt_int[i];
80.                  txt_int[i] = txt_int[j];
81.                  txt_int[j] = temp;
82.              }
83.          }
84.      }
85.      txt = txt_int;
86.  }
87.      for (i=1;i<txt.length;i++){
88.          for (j=1;j<tr_el.length;j++) {
89.              if (txt[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){
90.                  tr_el[i].parentNode.appendChild(tr_el[j]);   
91.              }
92.          }   
93.     }
94. }
95. function sortTableCBA(number,table_el){
96.  var tr_el = table_el.getElementsByTagName("tr");
97.  var txt = new Array();
98.  var txt_int = new Array();
99.  var sum = 0;
100.  for (i=1;i<tr_el.length;i++){
101.      txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;
102.      txt_int[i] = parseInt(txt[i]);
     }
103.  for (i=1;i<txt_int.length;i++){
104.       sum = sum + txt_int[i];
105.  }
106.  txt = txt.sort();
107.  if (sum>0) {
108.      for (i=1;i<txt_int.length;i++){
109.          for (j=1;j<txt_int.length;j++){
110.              if (txt_int[i]<txt_int[j]) {
111.                  var temp = txt_int[i];
112.                  txt_int[i] = txt_int[j];
113.                  txt_int[j] = temp;
114.              }
115.          }
116.      }
117.      txt = txt_int;
118.  }
119.      var txtCBA = new Array();
120.      for (i=1;i<txt.length;i++){
121.          txtCBA[i] = txt[txt.length-i-1];
122.      }
123.      for (i=1;i<txtCBA.length;i++){
124.          for (j=1;j<tr_el.length;j++) {
125.              if (txtCBA[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){
126.                  tr_el[i].parentNode.appendChild(tr_el[j]);   
127.              }
128.          }   
129.      }
130. }

stylesheet

1. #content_main table.datatable {
2.     border:3px solid #f00;
3.     border-collapse:collapse;
4. }
5. #content_main table.datatable td, #content_main table.datatable th {
6.     border:1px solid #000;
7.     padding:5px;
8. }
9. #content_main table.datatable th{
10.     background:#ffa;
11. }
12. #content_main table.datatable th a{
13.     color:#600;
14. }
15. #content_main table.datatable tr td:nth-child(even){
16.     background:#fee;
17. }
18. #content_main table.datatable tr:nth-child(even) td{
19.     background:#eee;
20. }
21. #content_main table.datatable tr:nth-child(even) td:nth-child(even){
22.     background:#ecc;
23. }
24. #content_main table.datatable tr:nth-child(even) th{
25.     background:#dd9
26. }
27. #content_main table.datatable tbody tr:hover th{
28.     background:#550;
29.     color:#fff;
30. }
31. #content_main table.datatable tbody tr:hover td, #content_main table.datatable tbody tr:hover td:nth-child(even){
32.     background:#990;
33.     color:#fff;
34. }
35. #content_main table.datatable thead th {
36.     background:#faa;
37. }
38. #content_main table.datatable th.button {
39.     cursor:pointer;
40. }
41. #content_main table.datatable th.button:hover {
42.  
43.     background:#fcc;
44. }
45. #content_main table.datatable th.up{
46.     background:url(images/icon09_up_arrow.gif) right center no-repeat;
47.     padding-right:13px;
48.     background-color:#cfc;
49. }
50. #content_main table.datatable th.up:hover{
51.    background:url(images/icon09_up_arrow.gif) right center no-repeat;
52.    background-color:#efe;
53. }
54. #content_main table.datatable th.down{
55.     background:url(images/icon10_down_arrow.gif) right center no-repeat;
56.     background-color:#ccf;
57.     padding-right:13px;
58. }
59. #content_main table.datatable th.down:hover{
60.     background:url(images/icon10_down_arrow.gif) right center no-repeat;
61.     background-color:#eef;
62. }

이 글은 스프링노트에서 작성되었습니다.