[jQuery] Table 셀 병합 ( colspan / rowspan ) 하는법

[jQuery] Table 셀 병합 ( colspan / rowspan ) 하는법

테이블 결과값이 같을 경우 셀을 병합하여 

보다 보기 편하게 사용할때 사용하는 방법이다

기존 다음과 같은표를

학년	반	이름
1	5	제니퍼
1	1	칼
2	5	존

▼▼▼▼▼▼▼▼▼

다음과 같이 변형 할때 사용하는 방법이다.

학년	반	이름
1	5	제니퍼
	1	칼
2	5	존

팁*

혹시 테이블 읽는데 시간이 걸려 병합되는과정이 보인다면 테이블을 히든처리한다음 

병합후 보여주는 기능을 사용하면 좋을듯하다.

▼  Jquery 사용 예제

jQuery(function() {
  
  $('#테이블 ID').rowspan(0); 
  $('#테이블 ID').rowspan(1);
 
 });
 
 
 
/* 
 * 
 * 같은 값이 있는 열을 병합함
 * 
 * 사용법 : $('#테이블 ID').rowspan(0);
 * 
 */     
$.fn.rowspan = function(colIdx, isStats) {       
    return this.each(function(){      
        var that;     
        $('tr', this).each(function(row) {      
            $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                
                if ($(this).html() == $(that).html()
                    && (!isStats 
                            || isStats && $(this).prev().html() == $(that).prev().html()
                            )
                    ) {            
                    rowspan = $(that).attr("rowspan") || 1;
                    rowspan = Number(rowspan)+1;
 
                    $(that).attr("rowspan",rowspan);
                    
                    // do your action for the colspan cell here            
                    $(this).hide();
                    
                    //$(this).remove(); 
                    // do your action for the old cell here
                    
                } else {            
                    that = this;         
                }          
                
                // set the that if not already set
                that = (that == null) ? this : that;      
            });     
        });    
    });  
}; 
 
 
/* 
 * 
 * 같은 값이 있는 행을 병합함
 * 
 * 사용법 : $('#테이블 ID').colspan (0);
 * 
 */   
$.fn.colspan = function(rowIdx) {
    return this.each(function(){
        
        var that;
        $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {
            $(this).find('th').filter(':visible').each(function(col) {
                if ($(this).html() == $(that).html()) {
                    colspan = $(that).attr("colSpan") || 1;
                    colspan = Number(colspan)+1;
                    
                    $(that).attr("colSpan",colspan);
                    $(this).hide(); // .remove();
                } else {
                    that = this;
                }
                
                // set the that if not already set
                that = (that == null) ? this : that;
                
            });
        });
    });
}

※ 참고 : http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html