1882622
자바스크립트 테이블 정렬
1885346
2008-10-20T11:45:22Z
http://kongbaguni.springnote.com/pages/1882622
2008-10-06T08:51:11Z
<p>테이블을 sort 하는 자바스크립트를 만들어봤습니다.</p>
<p>제가 이번에 만든 스크립트는 <sub>(언제나 그렇지만)</sub> 인라인스타일, 인라인스크립트를 일체 사용하지 않습니다.<br />
특정 class의 태이블을 오름차순 혹은 내림차순으로 정렬합니다.</p>
<table class="datatable">
<thead>
<tr>
<th>순번</th>
<th>제목</th>
<th>작가</th>
<th>출판사</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>감독부적격</td>
<td>Moyoco Anno</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>2</th>
<td>수수께끼 그녀 X 1</td>
<td>Ushiba Riichi</td>
<td>학산문화사</td>
</tr>
<tr>
<th>3</th>
<td>수수께끼 그녀 X 2</td>
<td>Ushiba Riichi</td>
<td>학산문화사</td>
</tr>
<tr>
<th>4</th>
<td>수수께끼 그녀 X 3</td>
<td>Ushiba Riichi</td>
<td>학산문화사</td>
</tr>
<tr>
<th>5</th>
<td>미나미가 1</td>
<td>Coharu Sakuraba</td>
<td>북박스</td>
</tr>
<tr>
<th>6</th>
<td>미나미가 2</td>
<td>Coharu Sakuraba</td>
<td>북박스</td>
</tr>
<tr>
<th>7</th>
<td>미나미가 3</td>
<td>Coharu Sakuraba</td>
<td>북박스</td>
</tr>
<tr>
<th>8</th>
<td>미나미가 4</td>
<td>Coharu Sakuraba</td>
<td>북박스</td>
</tr>
<tr>
<th>9</th>
<td>미나미가 5</td>
<td>Coharu Sakuraba</td>
<td>북박스</td>
</tr>
<tr>
<th>10</th>
<td>극락청춘 하키부 1</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>11</th>
<td>극락청춘 하키부 2</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>12</th>
<td>극락청춘 하키부 3</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>13</th>
<td>극락청춘 하키부 4</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>14</th>
<td>극락청춘 하키부 5</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>15</th>
<td>극락청춘 하키부 6</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>16</th>
<td>극락청춘 하키부 7</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>17</th>
<td>극락청춘 하키부 8</td>
<td>Ai Morinaga</td>
<td>대원씨아이</td>
</tr>
<tr>
<th>18</th>
<td>현시연 1</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>19</th>
<td>현시연 2</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>20</th>
<td>현시연 3</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>21</th>
<td>현시연 4</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>22</th>
<td>현시연 5</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>23</th>
<td>현시연 6</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>24</th>
<td>현시연 7</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>25</th>
<td>현시연 8</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
<tr>
<th>26</th>
<td>현시연 9</td>
<td>Kio Shimoku</td>
<td>북박스</td>
</tr>
</tbody>
</table>
<h3>Download</h3>
<p><a href="/pages/1882622/attachments/830092" title="table_sort.zip" class="attachment">table_sort.zip</a></p>
<h3>Code</h3>
<h4>javascript</h4>
<ol class="code">
<li>function addLoadEvent(func) {</li>
<li> var oldonLoad = window.onload;</li>
<li> if (typeof window.onload != 'function') {</li>
<li> window.onload = func;</li>
<li> }else {</li>
<li> window.onload = function(){</li>
<li> oldonLoad();</li>
<li> func();</li>
<li> }</li>
<li> }</li>
<li>}</li>
<li>function getElementsByClassName(clsName,parentNode) {</li>
<li> var arr = new Array();</li>
<li> if (parentNode == null) {</li>
<li> var elems = document.getElementsByTagName("*");</li>
<li> } else {</li>
<li> var elems = parentNode.getElementsByTagName("*");</li>
<li> }</li>
<li> for ( var cls, i = 0; ( elem = elems[i] ); i++ ) {</li>
<li> if ( elem.className == clsName ) {</li>
<li> arr[arr.length] = elem;</li>
<li> }</li>
<li> }</li>
<li> return arr;</li>
<li>}</li>
<li>addLoadEvent(sortTable);</li>
<li>function sortTable(){</li>
<li> var body_el = document.getElementsByTagName("body")[0]; </li>
<li> if (!getElementsByClassName("datatable",body_el))return false;</li>
<li> var table_el = getElementsByClassName("datatable",body_el);</li>
<li> for (i=0;i<table_el.length;i++){</li>
<li> table_el[i]._tr = table_el[i].getElementsByTagName("tr");</li>
<li> if (table_el[i]._tr[0].parentNode.nodeName!="THEAD")return false;</li>
<li> for (j=0;j<table_el[i]._tr[0].childNodes.length;j++){</li>
<li> if(table_el[i]._tr[0].childNodes[j].childNodes[0]){</li>
<li> var a_el = document.createElement("a");</li>
<li> a_el.href="#";</li>
<li> table_el[i]._tr[0].childNodes[j].appendChild(a_el);</li>
<li> a_el.appendChild(table_el[i]._tr[0].childNodes[j].childNodes[0]); </li>
<li> table_el[i]._tr[0].childNodes[j].className = "button";</li>
<li> table_el[i]._tr[0].childNodes[j]._number = j; </li>
<li> table_el[i]._tr[0].childNodes[j]._switch = false;</li>
<li> table_el[i]._tr[0].childNodes[j].onclick = function () {</li>
<li> for (i=0;i<this.parentNode.childNodes.length;i++){</li>
<li> this.parentNode.childNodes[i].className = "button";</li>
<li> } </li>
<li> if (this._switch == false){</li>
<li> this._switch = true;</li>
<li> sortTableABC(this._number,this.parentNode.parentNode.parentNode);</li>
<li> this.className = "button up";</li>
<li> return false;</li>
<li> } else {</li>
<li> this._switch= false;</li>
<li> sortTableCBA(this._number,this.parentNode.parentNode.parentNode);</li>
<li> this.className = "button down";</li>
<li> return false;</li>
<li> } </li>
<li> }</li>
<li> }</li>
<li> } </li>
<li> }</li>
<li>}</li>
<li>function sortTableABC(number,table_el){</li>
<li> var tr_el = table_el.getElementsByTagName("tr");</li>
<li> var txt = new Array();</li>
<li> var txt_int = new Array();</li>
<li> var sum = 0;</li>
<li> for (i=1;i<tr_el.length;i++){</li>
<li> txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;<br />
txt_int[i] = parseInt(txt[i]);</li>
<li> }</li>
<li> for (i=1;i<txt_int.length;i++){</li>
<li> sum = sum + txt_int[i];</li>
<li> }</li>
<li> txt = txt.sort();</li>
<li> if (sum>0) {</li>
<li> for (i=1;i<txt_int.length;i++){</li>
<li> for (j=1;j<txt_int.length;j++){</li>
<li> if (txt_int[i]<txt_int[j]) {</li>
<li> var temp = txt_int[i];</li>
<li> txt_int[i] = txt_int[j];</li>
<li> txt_int[j] = temp;</li>
<li> }</li>
<li> }</li>
<li> }</li>
<li> txt = txt_int;</li>
<li> }</li>
<li> for (i=1;i<txt.length;i++){</li>
<li> for (j=1;j<tr_el.length;j++) {</li>
<li> if (txt[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){</li>
<li> tr_el[i].parentNode.appendChild(tr_el[j]); </li>
<li> }</li>
<li> } </li>
<li> }</li>
<li>}</li>
<li>function sortTableCBA(number,table_el){</li>
<li> var tr_el = table_el.getElementsByTagName("tr");</li>
<li> var txt = new Array();</li>
<li> var txt_int = new Array();</li>
<li> var sum = 0;</li>
<li> for (i=1;i<tr_el.length;i++){</li>
<li> txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;</li>
<li> txt_int[i] = parseInt(txt[i]);<br />
}</li>
<li> for (i=1;i<txt_int.length;i++){</li>
<li> sum = sum + txt_int[i];</li>
<li> }</li>
<li> txt = txt.sort();</li>
<li> if (sum>0) {</li>
<li> for (i=1;i<txt_int.length;i++){</li>
<li> for (j=1;j<txt_int.length;j++){</li>
<li> if (txt_int[i]<txt_int[j]) {</li>
<li> var temp = txt_int[i];</li>
<li> txt_int[i] = txt_int[j];</li>
<li> txt_int[j] = temp;</li>
<li> }</li>
<li> }</li>
<li> }</li>
<li> txt = txt_int;</li>
<li> }</li>
<li> var txtCBA = new Array();</li>
<li> for (i=1;i<txt.length;i++){</li>
<li> txtCBA[i] = txt[txt.length-i-1];</li>
<li> }</li>
<li> for (i=1;i<txtCBA.length;i++){</li>
<li> for (j=1;j<tr_el.length;j++) {</li>
<li> if (txtCBA[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){</li>
<li> tr_el[i].parentNode.appendChild(tr_el[j]); </li>
<li> }</li>
<li> } </li>
<li> }</li>
<li>}</li>
</ol>
<h4>stylesheet</h4>
<ol class="code">
<li>#content_main table.datatable {</li>
<li> border:3px solid #f00;</li>
<li> border-collapse:collapse;</li>
<li>}</li>
<li>#content_main table.datatable td, #content_main table.datatable th {</li>
<li> border:1px solid #000;</li>
<li> padding:5px;</li>
<li>}</li>
<li>#content_main table.datatable th{</li>
<li> background:#ffa;</li>
<li>}</li>
<li>#content_main table.datatable th a{</li>
<li> color:#600;</li>
<li>}</li>
<li>#content_main table.datatable tr td:nth-child(even){</li>
<li> background:#fee;</li>
<li>}</li>
<li>#content_main table.datatable tr:nth-child(even) td{</li>
<li> background:#eee;</li>
<li>}</li>
<li>#content_main table.datatable tr:nth-child(even) td:nth-child(even){</li>
<li> background:#ecc;</li>
<li>}</li>
<li>#content_main table.datatable tr:nth-child(even) th{</li>
<li> background:#dd9</li>
<li>}</li>
<li>#content_main table.datatable tbody tr:hover th{</li>
<li> background:#550;</li>
<li> color:#fff;</li>
<li>}</li>
<li>#content_main table.datatable tbody tr:hover td, #content_main table.datatable tbody tr:hover td:nth-child(even){</li>
<li> background:#990;</li>
<li> color:#fff;</li>
<li>}</li>
<li>#content_main table.datatable thead th {</li>
<li> background:#faa;</li>
<li>}</li>
<li>#content_main table.datatable th.button {</li>
<li> cursor:pointer;</li>
<li>}</li>
<li>#content_main table.datatable th.button:hover {</li>
<li> </li>
<li> background:#fcc;</li>
<li>}</li>
<li>#content_main table.datatable th.up{</li>
<li> background:url(images/icon09_up_arrow.gif) right center no-repeat;</li>
<li> padding-right:13px;</li>
<li> background-color:#cfc;</li>
<li>}</li>
<li>#content_main table.datatable th.up:hover{</li>
<li> background:url(images/icon09_up_arrow.gif) right center no-repeat;</li>
<li> background-color:#efe;</li>
<li>}</li>
<li>#content_main table.datatable th.down{</li>
<li> background:url(images/icon10_down_arrow.gif) right center no-repeat;</li>
<li> background-color:#ccf;</li>
<li> padding-right:13px;</li>
<li>}</li>
<li>#content_main table.datatable th.down:hover{</li>
<li> background:url(images/icon10_down_arrow.gif) right center no-repeat;</li>
<li> background-color:#eef;</li>
<li>}</li>
</ol>
http://kongbaguni.myid.net/
http://kongbaguni.myid.net/
71
자바스크립트,웹표준,테이블,정렬