jQuery를 이용한 테이블 셀병합

통계 화면을 구성하던 중 같은 값에 대해서 셀을 병합해야 했는데 서버 스크립트에서 복잡하게 하지 말고

jQuery를 이용해 클라이언트단에서 구현하는 방법을 찾아봤습니다.

이미 같은 문제로 고민해서 구현해 놓은 것 중에 어떤 분 말씀대로 가장 깔끔한 코드를 첨부합니다 ^^

셀이 병합되는 모습을 보기 싫다면 테이블을 감추고 병합 후에 보여주면 될 것 같습니다.

 

문제 화면

유효성 검사	버전	1.1
데이터 검사	버전	1.1
데이터 검사	버전	1.3

 

요구하는 화면

유효성 검사	버전	1.1
데이터 검사	버전	1.1
		1.3

/*

 *

 * 같은 값이 있는 열을 병합함

 *

 * 사용법 : $('#테이블 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;

                 

            });

        });

    });

}




셀병합 호출

//첫번째 열을 병합한다.

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







출처 : http://shuiky.tistory.com/entry/jQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%85%80%EB%B3%91%ED%95%A9