jQuery를 이용한 테이블 셀병합

검색어 : $.fn.rowspan

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

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

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

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

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

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

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

 

문제 화면

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

 

요구하는 화면

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

 

 

function 추가

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

/*  *  * 같은 값이 있는 열을 병합함  *  * 사용법 : $('#테이블 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;                               });         });     }); }

 

 

셀병합 호출

?

1 2	//첫번째 열을 병합한다. $('#테이블 ID').rowspan(0);

 

 

참고 사이트

http://willifirulais.blogspot.kr/2007/07/jquery-table-column-break.html

http://idkbj.tistory.com/58