jQuery를 이용한 테이블 셀병합 - 통계 등

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

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

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

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

 

문제 화면

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

 

요구하는 화면

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

 

 

function 추가

/* 
 * 
 * 같은 값이 있는 열을 병합함
 * 
 * 사용법 : $('#테이블 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://willifirulais.blogspot.kr/2007/07/jquery-table-column-break.html

http://idkbj.tistory.com/58