jquery를 이용한 테이블 열병합 rowspan

Table에 뿌려지는 데이터들이 고정된 데이터들이라면 초기단계에서 rowspan을 이용하여 만들 수 있지만 Database에서 데이터를 불러오는 경우는 초기 rowspan을 이용하여 디자인하기가 어렵습니다.

 

 

이런 경우 jquery를 이용하여 테이블에 뿌려지는 데이터를 기준으로 rowspan을 설정할 수가 있는데요. 열병합을 해야 하는 과 데이터를 지정하기 위해 함수로 만들어 둠으로써 가변적인 rowspan을 간단하게 사용할 수가 있습니다.

 

Rowspan 생성을 위한 Jquery 함수

$.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;      
            });     
        });    
    });  
};

이렇게 데이터에 따라 rowspan을 사용할 수 있도록 함수를 생성함으로써 간단하게 rowspan을 사용할 수가 있습니다. 

 

 

Rowspan사용을 위한 열병합 호출

$(document).ready(function(e){

	$('#테이블 ID').rowspan(0);
    $('#테이블 ID').rowspan(1);

});

Table에 Rowspan을 적용하기 위한 Table ID를 지정해 놓고 해당 테이블의 첫번째 열과 두 번째 열의 동일 데이터에 대해 열병합을 시키는 스크립트입니다.

 

• rowspan(0) 첫번째 열의 동일 데이터에 대해 열병합
• rowspan(1) 두번째 열의 동일 데이터에 대한 열병합