JavaScript] 동적 테이블 병합

프로젝트하면서 동적 테이블 병합을 할 일이 생겨 사용한  테이블 병합 함수입니다.

병합을 원하는 열을 넣으면 row별로 체크하여 rowspan을 셋팅합니다.

setRowspan(num) {	//num 병합을 원하는 열
  var mergeItem = "";	//병합구분값
  var mergeCount = 0;	//병합 수
  var mergeRowNum = 0;	//병합들어갈 row

  $('tr','#table1').each(function(row){  // #테이블ID값
    if(row > 0 ){
      var item = $(':eq(' + num +')',$(this)).html();
      if(mergeItem != item  ) {
        mergeCount = 1;
        mergeItem = item ;
        mergeRowNum = row;
      }else{
        mergeCount = mergeCount + 1;
        $("tr:eq("+mergeRowNum+") > td:eq("+num+")").attr("rowspan",mergeCount);
        $('td:eq('+num+')',$(this)).hide();	//병합될 값들 숨김처리
      }
    }
  })
}

다만 여러 줄을 병합할 경우 첫 번째 병합과 무관하게 병합됩니다.

예를 들어 1열과 2열을 병합하게 될 경우 1열과 2열이 아무 관계없이 병합됩니다.(값만 가지고 비교하기 때문입니다.)

1	1	1
	2	2
		3
2		4
3	3	5

 

참조

https://brunch.co.kr/@ourlove/85

동적으로 테이블 병합하기