½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ÆÛÆ÷¸Õ½º > Å×À̺í¸ñ·Ï ´ÙÀ̳ª¹Í Á¤·Ä »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
Javascript
PHP
html
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Å×À̺í¸ñ·Ï ´ÙÀ̳ª¹Í Á¤·Ä
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ÆÛÆ÷¸Õ½º
´Ù¿î·Îµå Ƚ¼ö 1139 ȸ
°£´Ü¼³¸í Å×ÀÌºí ¸ñ·ÏÀ» ´ÙÀ̳ª¹ÍÇÏ°Ô Á¤·Ä(Sort) ÇÕ´Ï´Ù. (¿¹Á¦:»ó´Ü¿ÞÂʸ޴º±âÁØ)
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

<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>


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
³Ê¹« ÁÁ½À´Ï´Ù. Àß »ç¿ëÇÏ°Ù½À´Ï´Ù.
ÇÑ µÎ°¡Áö¸¦ ´õ Æ÷ÇÔÇÏ¸é ´õ¿í ÁÁÀ» °Í °°&#46325;µ¥...
data¿¡ ¸µÅ©¸¦ °É ¼ö ÀÖÀ¸¸é ÁÁ°Ú½À´Ï´Ù.
data field¿¡ ¸µÅ©¸¦ °É¸é sort°¡ Á¦´ë·Î ¾ÈµË´Ï´Ù.
data¸¦ ¿ÜºÎ ÆÄÀÏ¿¡¼­ ÀÐÀ» ¼ö ÀÖÀ¸¸é ´õ ÁÁ°Ú½À´Ï´Ù. ³î·¥~ ¿Õ¿ôÀ½~
2008-01-19 03:57:58
janghpaik
Âù¼º 49
¹Ý´ë 61
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 10743963 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.