[ 자바스크립트 ] 테이블 정렬하기

최종 수정일 : 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()

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