<html>
<head>
<title>해피CGI</title>
<style>
.smartTable {border-collapse:collapse; margin:20px auto;}
.smartTable th, .smartTable td {border:1px solid #000000; padding:5px;}
.smartTable th {background-color:#666666; color:#FFFFFF;}
.smartTable .r0 td {}
.smartTable .r1 td {background-color:#F6F6F6;}
.smartTable .over td {background-color:#FF8800;}
.smartTable .sortedAsc {background-color:#66CC66 !important;}
.smartTable .sortedDesc {background-color:#CC6666 !important;}
</style>
<script>
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: RoBorg
http://javascript.geniusbug.com | http://www.roborg.co.uk */
function smartTableInit() {
var tables = document.getElementsByTagName('table');
var len = tables.length;
for(var i=0; i<len; i++) {
if(tables[i].className.indexOf('smartTable') != -1)
smartTable(tables[i]);
}
}
function smartTable(t) {
var trs = t.getElementsByTagName('tbody').item(0).getElementsByTagName('tr');
var len = trs.length;
for(var i=0; i<len; i++) {
trs[i].className = 'r' + (i%2);
trs[i].onmouseover = function() {
this.className += ' over';
}
trs[i].onmouseout = function() {
this.className = this.className.replace(/\s+over/, '');
}
}
var rows = t.rows;
var numRows = rows.length;
for(var i=0; i<numRows; i++) {
var cells = rows[i].cells;
var numCells = cells.length;
for(var j=0; j<numCells; j++) {
if(j && i)
break;
if(i) cells[j].onclick = new Function('sortByRow(this, ' + i + ');');
else cells[j].onclick = new Function('sortByCol(this, ' + j + ');');
}
}
}
function sortByRow(th, r) {
var t = th;
while(t.tagName.toLowerCase() != 'table')
t = t.parentNode;
var dir = 1;
if(t.sortedRow) {
if(Math.abs(t.sortedRow) == r+1)
dir = t.sortedRow == r+1?-1:1;
}
var vals = new Array();
var val;
var len = t.rows[r].cells.length;
var cells = t.rows[r].cells;
for(var i=1; i<len; i++) {
val = cells[i].innerHTML;
vals[vals.length] = {'val':val,'i':i};
}
vals = vals.sort(sortCell);
if(dir == -1)
vals = vals.reverse();
var newT = t.cloneNode(true);
for(var j=0; j<t.rows.length; j++) {
if(j) {
var cName = newT.rows[j].cells[0].className.replace(/\s*sorted(Asc|Desc)/, '');
if(j == r)
cName += (dir == 1?' sortedAsc':' sortedDesc');
newT.rows[j].cells[0].className = cName;
}
for(var i=0; i<vals.length; i++) {
newT.rows[j].replaceChild(t.rows[j].cells[vals[i].i].cloneNode(true), newT.rows[j].cells[i+1]);
}
}
t.parentNode.replaceChild(newT, t);
newT.sortedRow = (r+1) * dir;
smartTable(newT);
}
function sortByCol(th, c) {
var t = th;
while(t.tagName.toLowerCase() != 'table')
t = t.parentNode;
var dir = 1;
if(t.sortedCol) {
if(Math.abs(t.sortedCol) == c+1)
dir = t.sortedCol == c+1?-1:1;
}
var vals = new Array();
var val;
for(var i=1; i<t.rows.length; i++) {
if(!t.rows[i].cells[c]) val = 0;
else val = t.rows[i].cells[c].innerHTML;
vals[vals.length] = {'val':val,'i':i};
}
vals = vals.sort(sortCell);
if(dir == -1)
vals = vals.reverse();
var newT = t.cloneNode(true);
var len = newT.rows[0].cells.length;
var cells = newT.rows[0].cells;
for(var i=0; i<len; i++) {
var cName = cells[i].className.replace(/\s*sorted(Asc|Desc)/, '');
if(i == c)
cName += (dir == 1?' sortedAsc':' sortedDesc');
cells[i].className = cName;
}
for(var i=0; i<vals.length; i++) {
newT.rows[i+1].parentNode.replaceChild(t.rows[vals[i].i].cloneNode(true), newT.rows[i+1]);
}
t.parentNode.replaceChild(newT, t);
newT.sortedCol = (c+1) * dir;
smartTable(newT);
}
function sortCell(a, b) {
if(a.val == b.val)
return 0;
return a.val < b.val?-1:1;
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
smartTableInit();
});
</script>
</head>
<body>
<table class="smartTable">
<tr>
<th> </th>
<th>Cow</th>
<th>Sheep</th>
<th>Pig</th>
<th>Dog</th>
</tr><tr>
<td>Name</td>
<td>Daisy</td>
<td>Fluffy</td>
<td>Oinky</td>
<td>Barky</td>
</tr><tr>
<td>Height</td>
<td>180cm</td>
<td>121cm</td>
<td>100cm</td>
<td>056cm</td>
</tr><tr>
<td>Deliciousness</td>
<td>85%</td>
<td>68%</td>
<td>93%</td>
<td>13%</td>
</tr><tr>
<td>Noise</td>
<td>Moo</td>
<td>Baa</td>
<td>Oink</td>
<td>Woof</td>
</tr>
</table>
</body>
</html>
|
