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

µ¥¸ð¸¦ È®ÀÎÇÏ½Ã°í ½ÇÇà½ÃÅ°¼¼¿ä

¾Æ·¡´Â º»¿¹Á¦ÀÇ ½ºÅ©¸³Æ®¿ø¹®ÀÔ´Ï´Ù.

 

 

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


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 55148787 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.