µ¥¸ð¸¦ È®ÀÎÇÏ½Ã°í ½ÇÇà½ÃÅ°¼¼¿ä
¾Æ·¡´Â º»¿¹Á¦ÀÇ ½ºÅ©¸³Æ®¿ø¹®ÀÔ´Ï´Ù.
<html> <head> <title>ÇØÇÇCGI</title> <style type="text/css"> .highlightedColumn{ background-color:#efefef; } </style> <script type="text/javascript"> var tableWidget_okToSort = true; var tableWidget_arraySort = new Array(); tableWidget_tableCounter = 1; var activeColumn = new Array();
var currentColumn = false; function sortNumeric(a,b){ a = a.replace(/,/,'.'); b = b.replace(/,/,'.'); a = a.replace(/[^\d\.\/]/g,''); b = b.replace(/[^\d\.\/]/g,''); if(a.indexOf('/')>=0)a = eval(a); if(b.indexOf('/')>=0)b = eval(b); return a/1 - b/1; }
function sortString(a, b) {
if ( a.toUpperCase() < b.toUpperCase() ) return -1; if ( a.toUpperCase() > b.toUpperCase() ) return 1; return 0; } function sortTable() { if(!tableWidget_okToSort)return; tableWidget_okToSort = false; /* Getting index of current column */ var obj = this; var indexThis = 0; while(obj.previousSibling){ obj = obj.previousSibling; if(obj.tagName=='TD')indexThis++; } if(this.getAttribute('direction') || this.direction){ direction = this.getAttribute('direction'); if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction; if(direction=='ascending'){ direction = 'descending'; this.setAttribute('direction','descending'); this.direction = 'descending'; }else{ direction = 'ascending'; this.setAttribute('direction','ascending'); this.direction = 'ascending'; } }else{ direction = 'ascending'; this.setAttribute('direction','ascending'); this.direction = 'ascending'; } var tableObj = this.parentNode.parentNode.parentNode; var tBody = tableObj.getElementsByTagName('TBODY')[0]; var widgetIndex = tableObj.getAttribute('tableIndex'); if(!widgetIndex)widgetIndex = tableObj.tableIndex;
if(currentColumn)currentColumn.className=''; document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn'; currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){ if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction'); }
activeColumn[widgetIndex] = this; var cellArray = new Array(); var cellObjArray = new Array(); for(var no=1;no<tableObj.rows.length;no++){ var content= tableObj.rows[no].cells[indexThis].innerHTML+''; cellArray.push(content); cellObjArray.push(tableObj.rows[no].cells[indexThis]); } if(sortMethod=='N'){ cellArray = cellArray.sort(sortNumeric); }else{ cellArray = cellArray.sort(sortString); } if(direction=='descending'){ for(var no=cellArray.length;no>=0;no--){ for(var no2=0;no2<cellObjArray.length;no2++){ if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){ cellObjArray[no2].setAttribute('allreadySorted','1'); tBody.appendChild(cellObjArray[no2].parentNode); } } } }else{ for(var no=0;no<cellArray.length;no++){ for(var no2=0;no2<cellObjArray.length;no2++){ if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){ cellObjArray[no2].setAttribute('allreadySorted','1'); tBody.appendChild(cellObjArray[no2].parentNode); } } } } for(var no2=0;no2<cellObjArray.length;no2++){ cellObjArray[no2].removeAttribute('allreadySorted'); }
tableWidget_okToSort = true; } function initSortTable(objId,sortArray) { var obj = document.getElementById(objId); obj.setAttribute('tableIndex',tableWidget_tableCounter); obj.tableIndex = tableWidget_tableCounter; tableWidget_arraySort[tableWidget_tableCounter] = sortArray; var tHead = obj.getElementsByTagName('THEAD')[0]; var cells = tHead.getElementsByTagName('TD'); for(var no=0;no<cells.length;no++){ if(sortArray[no]){ cells[no].onclick = sortTable; }else{ cells[no].style.cursor = 'default'; } } for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */ if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right'; } tableWidget_tableCounter++; } </script> </head> <body>
<table id="myTable" cellpadding=3 cellspacing=1 width=400> <!-- id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...) --> <colgroup> <col id="col1_1"></col> <col id="col1_2"></col> <col id="col1_3"></col> <col id="col1_4"></col> <col id="col1_5"></col> </colgroup> <thead> <tr bgcolor=c0c0c0 style="cursor:hand"> <td>Name</td> <td>Age</td> <td>Position</td> <td>Income</td> <td>Gender</td> </tr> </thead> <tbody> <tr> <td>John</td> <td>37</td> <td>Managing director</td> <td>90.000</td> <td>Male</td> </tr> <tr> <td>Susan</td> <td>34</td> <td>Partner</td> <td>90.000</td> <td>Female</td> </tr> <tr> <td>David</td> <td>29</td> <td>Head of production</td> <td>70.000</td> <td>Male</td> </tr> <tr> <td>Laura</td> <td>29</td> <td>Head of marketing</td> <td>70.000</td> <td>Female</td> </tr> <tr> <td>Kate</td> <td>18</td> <td>Marketing</td> <td>50.000</td> <td>Female</td> </tr> <tr> <td>Mona</td> <td>21</td> <td>Marketing</td> <td>53.000</td> <td>Female</td> </tr> <tr> <td>Mike</td> <td>21</td> <td>Marketing</td> <td>53.000</td> <td>Male</td> </tr> <tr> <td>Mark</td> <td>25</td> <td>Production</td> <td>52.000</td> <td>Male</td> </tr> <tr> <td>Peter</td> <td>33</td> <td>Production</td> <td>55.000</td> <td>Male</td> </tr> <tr> <td>Jennifer</td> <td>24</td> <td>Production</td> <td>49.000</td> <td>Female</td> </tr> <tr> <td>David</td> <td>25</td> <td>Photography</td> <td>51.000</td> <td>Male</td> </tr> <tr> <td>Anna</td> <td>42</td> <td>Head of photography</td> <td>56.000</td> <td>Female</td> </tr> <tr> <td>Rita</td> <td>30</td> <td>Photography</td> <td>54.000</td> <td>Female</td> </tr> <tr> <td>Magnus</td> <td>25</td> <td>Freelancer</td> <td>65.000</td> <td>Male</td> </tr> <tr> <td>Johnny</td> <td>29</td> <td>Freelancer</td> <td>63.000</td> <td>Male</td> </tr> </tbody> </table> <script type="text/javascript"> initSortTable('myTable',Array('S','N','S','N','S')); </script>
</body> </html>
|