Archive

Calender

«   2020/01   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

최종 수정일 : 2017. 12. 21.

댓글을 달아주신, 이름 모를 분(?)께 감사드리며~*
천단위 쉼표가 들어간 숫자일 때, 오류가 나는 부분을 수정함.



테이블에 들어있는 내용을 정렬해주는 함수를 만들어 보았다.


아래 내용은, <table> 태그 & <ul> 태그에서만 사용 가능하다. (다른 태그에서는 사용 불가.)


각각의 버튼을 눌러보면,
가나다순으로 정렬되거나, 역순으로 정렬된다.



순위
영 화 제 목
관 객 수
개 봉 일
1 명량 17,615,152 2014. 07. 30
2 국제시장 14,262,498 2014. 12. 17
3 베테랑 13,414,200 2015. 08. 05
4 도둑들 12,983,841 2012. 07. 25
5 7번방의 선물 12,811,435 2013. 01. 23
6 암살 12,706,483 2015. 07. 22
7 광해, 왕이 된 남자 12,323,595 2012. 09. 13
8 택시운전사 12,186,327 2017-08-02
9 부산행 11,566,862 2016-07-20
10 변호인 11,374,879 2013-12-18
11 해운대 11,324,545 2009-07-22
12 괴물 10,917,221 2006-07-27
13 왕의 남자 10,513,715 2005-12-29
14 검사외전 9,707,581 2016-02-03
15 설국열차 9,350,338 2013-08-01
16 관상 9,135,806 2013. 09. 11
17 해적: 바다로 간 산적 8,666,208 2014. 08. 06
18 수상한 그녀 8,659,725 2014. 01. 22
19 과속스캔들 8,223,342 2008. 12. 03
20 국가대표 8,035,181 2009. 07. 29

 
<script type="text/javascript">

// 출처 : http://tonks.tistory.com/79 
// 에러가 나온다면, 여기에 댓글을 남겨주세요. 


/* sortingNumber() : 숫자인 실수만으로 되어있을 때, 적용될 함수 */ 

function sortingNumber( a , b ){  

        if ( typeof a == "number" && typeof b == "number" ) return a - b; 

        // 천단위 쉼표와 공백문자만 삭제하기.  
        var a = ( a + "" ).replace( /[,\s\xA0]+/g , "" ); 
        var b = ( b + "" ).replace( /[,\s\xA0]+/g , "" ); 

        var numA = parseFloat( a ) + ""; 
        var numB = parseFloat( b ) + ""; 

        if ( numA == "NaN" || numB == "NaN" || a != numA || b != numB ) return false; 

        return parseFloat( a ) - parseFloat( b ); 
} 


/* changeForSorting() : 문자열 바꾸기. */ 

function changeForSorting( first , second ){  

        // 문자열의 복사본 만들기. 
        var a = first.toString().replace( /[\s\xA0]+/g , " " ); 
        var b = second.toString().replace( /[\s\xA0]+/g , " " ); 

        var change = { first : a, second : b }; 

        if ( a.search( /\d/ ) < 0 || b.search( /\d/ ) < 0 || a.length == 0 || b.length == 0 ) return change; 

        var regExp = /(\d),(\d)/g; // 천단위 쉼표를 찾기 위한 정규식. 

        a = a.replace( regExp , "$1" + "$2" ); 
        b = b.replace( regExp , "$1" + "$2" ); 

        var unit = 0; 
        var aNb = a + " " + b; 
        var numbers = aNb.match( /\d+/g ); // 문자열에 들어있는 숫자 찾기 

        for ( var x = 0; x < numbers.length; x++ ){ 

                var length = numbers[ x ].length; 
                if ( unit < length ) unit = length; 
        } 

        var addZero = function( string ){ // 숫자들의 단위 맞추기 

                var match = string.match( /^0+/ ); 

                if ( string.length == unit ) return ( match == null ) ? string : match + string; 

                var zero = "0"; 

                for ( var x = string.length; x < unit; x++ ) string = zero + string; 

                return ( match == null ) ? string : match + string; 
        }; 

        change.first = a.replace( /\d+/g, addZero ); 
        change.second = b.replace( /\d+/g, addZero ); 

        return change; 
} 


/* byLocale() */ 

function byLocale(){ 

        var compare = function( a , b ){ 

                var sorting = sortingNumber( a , b ); 

                if ( typeof sorting == "number" ) return sorting; 

                var change = changeForSorting( a , b ); 

                var a = change.first; 
                var b = change.second; 

                return a.localeCompare( b ); 
        }; 

        var ascendingOrder = function( a , b ){  return compare( a , b );  }; 
        var descendingOrder = function( a , b ){  return compare( b , a );  }; 

        return { ascending : ascendingOrder, descending : descendingOrder }; 
} 


/* replacement() */ 
 
function replacement( parent ){  
        var tagName = parent.tagName.toLowerCase(); 
        if ( tagName == "table" ) parent = parent.tBodies[ 0 ]; 
        tagName = parent.tagName.toLowerCase(); 
        if ( tagName == "tbody" ) var children = parent.rows; 
        else var children = parent.getElementsByTagName( "li" ); 

        var replace = { 
                order : byLocale(), 
                index : false, 
                array : function(){ 
                        var array = [ ]; 
                        for ( var x = 0; x < children.length; x++ ) array[ x ] = children[ x ]; 
                        return array; 
                }(), 
                checkIndex : function( index ){ 
                        if ( index ) this.index = parseInt( index, 10 ); 
                        var tagName = parent.tagName.toLowerCase(); 
                        if ( tagName == "tbody" && ! index ) this.index = 0; 
                }, 
                getText : function( child ){ 
                        if ( this.index ) child = child.cells[ this.index ]; 
                        return getTextByClone( child ); 
                }, 
                setChildren : function(){ 
                        var array = this.array; 
                        while ( parent.hasChildNodes() ) parent.removeChild( parent.firstChild ); 
                        for ( var x = 0; x < array.length; x++ ) parent.appendChild( array[ x ] ); 
                }, 
                ascending : function( index ){ // 오름차순 
                        this.checkIndex( index ); 
                        var _self = this; 
                        var order = this.order; 
                        var ascending = function( a, b ){ 
                                var a = _self.getText( a ); 
                                var b = _self.getText( b ); 
                                return order.ascending( a, b ); 
                        }; 
                        this.array.sort( ascending ); 
                        this.setChildren(); 
                }, 
                descending : function( index ){ // 내림차순
                        this.checkIndex( index ); 
                        var _self = this; 
                        var order = this.order; 
                        var descending = function( a, b ){ 
                                var a = _self.getText( a ); 
                                var b = _self.getText( b ); 
                                return order.descending( a, b ); 
                        }; 
                        this.array.sort( descending ); 
                        this.setChildren(); 
                } 
        }; 
        return replace; 
} 

function getTextByClone( tag ){  
        var clone = tag.cloneNode( true ); // 태그의 복사본 만들기. 
        var br = clone.getElementsByTagName( "br" ); 
        while ( br[0] ){ 
                var blank = document.createTextNode( " " ); 
                clone.insertBefore( blank , br[0] ); 
                clone.removeChild( br[0] ); 
        } 
        var isBlock = function( tag ){ 
                var display = ""; 
                if ( window.getComputedStyle ) display = window.getComputedStyle ( tag, "" )[ "display" ]; 
                else display = tag.currentStyle[ "display" ]; 
                return ( display == "block" ) ? true : false; 
        }; 
        var children = clone.getElementsByTagName( "*" ); 
        for ( var x = 0; x < children.length; x++){ 
                var child = children[ x ]; 
                if ( ! ("value" in child) && isBlock(child) ) child.innerHTML = child.innerHTML + " "; 
        } 
        var textContent = ( "textContent" in clone ) ? clone.textContent : clone.innerText; 
        return textContent; 
} 
</script>

각 칸의 번호(index)는, 왼쪽부터 시작되며,
맨 왼쪽 칸( <td> )의 번호가 0이다.


 
<table border="1" id="KoreanMovie">
  <thead>
    <tr>
     <th> 순위       <button onclick="sortTD ( 0 )">▲</button><button onclick="reverseTD ( 0 )">▼</button></th>
     <th> 영화제목 <button onclick="sortTD ( 1 )">▲</button><button onclick="reverseTD ( 1 )">▼</button></th>
     <th> 관객수    <button onclick="sortTD ( 2 )">▲</button><button onclick="reverseTD ( 2 )">▼</button></th>
     <th> 개봉일    <button onclick="sortTD ( 3 )">▲</button><button onclick="reverseTD ( 3 )">▼</button></th>
    </tr>
  </thead>
  <tbody>
    <tr><td> 1 </td><td> 명량 </td><td> 17,615,039 </td><td> 2014. 07. 30 </td></tr>
    <tr><td> 2 </td><td> 국제시장 </td><td> 14,261,582 </td><td> 2014. 12. 17 </td></tr>
    <tr><td> 3 </td><td> 베테랑 </td><td> 13,414,009 </td><td> 2015. 08. 05 </td></tr>
    <!-- 이 하 생 략 ( The rest is omitted. ) -->
  </tbody>
</table>


<script type="text/javascript">
var myTable = document.getElementById( "KoreanMovie" ); 
var replace = replacement( myTable ); 
function sortTD( index ){    replace.ascending( index );    } 
function reverseTD( index ){    replace.descending( index );    } 
</script>
 


<tr> 태그 안에, <td> 태그가 각각 하나씩만 들어있다면, 아래처럼 작성하면 된다.



아바타
어벤져스 : 에이지 오브 울트론
인터스텔라
겨울왕국
아이언맨 3
트랜스포머 3
미션임파서블 : 고스트프로토콜
트랜스포머
트랜스포머 : 패자의 역습
어벤져스
 
<button onclick="sortTable()"> 가나다순 </button> <button onclick="reverseTable()"> 역순 </button>
<table border="1" id="foreignMovie">
  <tbody>
    <tr><td> 아바타 </td></tr>
    <tr><td> 어벤져스 : 에이지 오브 울트론 </td></tr>
    <tr><td> 인터스텔라 </td></tr>
    <!-- 이 하 생 략 ( The rest is omitted. ) -->
  </tbody>
</table>

<script type="text/javascript">
var myTable = document.getElementById( "foreignMovie" ); 
var replace = replacement( myTable ); 
function sortTable(){    replace.ascending( );    } 
function reverseTable(){    replace.descending( );    } 
</script>
 


이 내용을 <ul>태그에서 사용하려면, 아래 글을 참고하시오~*.
[ 자바스크립트 ] 리스트 정렬하기



이 블로그에서 함께 볼만한 글
1. [ 자바스크립트 ] 배열 정렬용 함수 만들기
2. [ 자바스크립트 ] sort()





이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*

4 Comments

  1. 🕔 2017.02.06 16:19 AddressModify/DeleteReply

    비밀댓글입니다

    • Favicon of https://tonks.tistory.com 통스 블로거 🕔 2017.02.06 18:30 신고 AddressModify/Delete

      아래는, 제 네이버 아이디입니다.
      네이버에 로그인하셔서,
      작성하신 내용 그대로, 저한테 쪽지나 메일을 보내주시겠어요?
      http://kin.naver.com/profile/kimone0915

  2. zel 🕔 2019.09.24 11:45 AddressModify/DeleteReply

    소수점은 정렬이 안되나봐요

    • Favicon of https://tonks.tistory.com 통스 블로거 🕔 2019.10.02 20:27 신고 AddressModify/Delete

      테이블 정렬하는게 쉽지가 않네요...
      한번 뒤집어엎긴 해야 할텐데... ㅡ.ㅡ;;
      멋모르고 이것저것 도전해볼때 작성한거라...
      썩 그리 좋은 코드라고는... ㅡ.ㅡ;;