html table merge 테이블 셀 병합을 쉽게 하자

안녕하세요~ 삽질하는 프로그래머 통통만두입니다. 어느덧 웹 개발을 시작한지도 3개월이 조금 넘었네요.

어려울 것처럼 느껴졌던 웹개발이 시간이 갈수록 익숙해짐에 따라서 쉽게 느껴지네요. 어디까지나 저의 느낌입니다 ^^;

요즘에는 통계쪽 화면을 개발하고 있는데요, 간단한 화면구성도 있지만 복잡한 화면구성도 있는데 이 것을 화면으로 출력하자니 난감한 상황이 발생하네요.

우선 현재 html table 로 구성된 화면은 위의 이미지와 같습니다. 위 아래 같은 이름은 rowspan을 해주어야 하는데 jstl로 개노가다를 해야 하나 어떻게 해야 하나 고민이 많았습니다. 하지만 하늘에서 한 줄기 빛이 내려왔습니다. 그 이름은 바로 jQuery !!!! ㅋㅋㅋㅋ

정말 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;
      });
    });
  });
};

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

      });
    });
  });
}

사용법은 아래와 같습니다.

$("#tblResult").rowspan(0);
$("#tblResult").rowspan(1);
$("table tbody tr:visible").each(function(row) {
  $('#tblResult').colspan(row);
})

이렇게 하면 짜잔~~ 참 쉽죠잉~? jQuery 만쉐이!

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