[js] table 셀 병합(cell merge) rowspan - 1개 결합 & 2개이상 결합

 

table 셀 병합(cell merge) 기능이 종종 필요합니다.

이럴 경우 rowspan 기능을 사용하여 셀을 병합하면 됩니다.

 

인터넷에 js 테이블 셀 병합 기능을 검색하면 다 1개만 결합하는 기능만 나옵니다. 

2개이상 결합은 잘 나오지 않아서 정리하게 되었습니다.

 

먼저, 1개의 셀 병합에 대해서 알려드리겠습니다.

 

1. 테이블 셀 병합 - 1개 결합

//rowspan 처리 - 1개 셀결합
function fn_genRowspan(className){
	$("." + className).each(function() {
		var rows = $("." + className + ":contains('" + $(this).text() + "')");
		
		if (rows.length > 1) {
            rows.eq(0).attr("rowspan", rows.length);
            rows.not(":eq(0)").remove();
          }  
	});
}

//테이블 생성
function getable() {

...
 let html = '';
 
 $.each(data.list, function (i, item) {
                    html += '<tr>';
                    html += '<td class ="testRow">' + item.itemName + '</td>';
                    html += '<td>' + item.itemA + '</td>';
                     html += '<td>' + item.itemCodeName + '</td>';
                    html += '</tr>';
                });
                $('#tableTest').html(html);
                
                fn_genRowspan('testRow');
...
}

결합하고 싶은 td에 class를 설정하여 넣으시면 됩니다.

 

2. 테이블 셀 병합 - 2개 결합

위에 사진처럼 관련된 애들끼리 결합하고 싶을 경우 2개 이상을 결합하는 소스이다.

/** Function, Table Cell Merge - 2개이상 셀결합
*
* @param : table id
* @param : arrangement of column, ex) [0, 1, 2]
* @param : group tag of column [option]
* ex) fn_cellMerge('evalTable', [0,1]) - 0,1열 결합
*/ 
function fn_cellMerge(vid, vcol, vtd){ //테이블 아이디, 셀머지할 컬럼 0부터~, 태그(옵션)
 
   var id = vid;
   var col = vcol;
   var td = ((!!vtd) ? vtd : "td"  ); // 기본이 td 태그 기준으로 merge함
     
   var spanCnt = 1;
   var preText; //이전 텍스트
  
   var r = [];

   var rows = $("table[id="+id+"] tr").find(td+":eq("+col[0]+")").length; //row 개수
  
   if(rows <= 1){
       return false;
   }
  
  
  
   for(var i = 0; col.length > i; i++){
  
       r.push({ idx : [], spans : []});
  
       if(i == 0){ //첫번째
      
           $("table[id="+id+"] tr").find(td+":eq("+col[i]+")").each(function(index, item){// row수만큼 돌린다.
             
               if(index == 0) { //첫번째 row
                 
                   r[i].idx.push(index);
                   spanCnt = 1;
             
               }else if( (rows-1) == index){ //마지막 row
              
                   if(preText != $(this).text()){ //중복없이 단일행 마지막
                  
                       r[i].idx.push(index);
                       r[i].spans.push(spanCnt);
                      
                   }else{ //전 값이 동일한 경우
                  
                       spanCnt = spanCnt+1;
                       r[i].spans.push(spanCnt);
                   }
                  
               }else if(preText != $(this).text()){ //텍스트가 바뀔때 index
                 
                   r[i].idx.push(index);
                   r[i].spans.push(spanCnt);
                   spanCnt = 1;
             
               }else{ //위 아래 텍스트가 같을 때
                 
                   spanCnt = spanCnt+1;
               }
               preText = $(this).text();
           });
       }else if( !r[i-1].idx.length){ // rowSpan할 row가 없다면 종료
      
           break;
          
       }else{ //그 뒤 그룹으로
      
           var j = 1; //그룹 구별자
          
           $("table[id="+id+"] tr").find(td+":eq("+col[i]+")").each(function(index, item){// row수만큼 돌린다.
             
             
               if(index == 0) { //첫번째 row
                 
                   r[i].idx.push(index);
                   spanCnt = 1;
             
               }else if(r[i-1].idx[j] == (index)){ //rowSpan 적용 시작 지점에서 리셋
                  
                   r[i].idx.push(index);
                   r[i].spans.push(spanCnt);
                   spanCnt = 1;
                   j++;
                 
               }else if( (rows-1) == index){ //마지막 row
              
                   if(preText != $(this).text()){ //중복없이 단일행 마지막
                  
                       r[i].idx.push(index);
                       r[i].spans.push(spanCnt);
                      
                   }else{ //전 값이 동일한 경우
                  
                       spanCnt = spanCnt+1;
                       r[i].spans.push(spanCnt);
                   }
                 
               }else if(preText != $(this).text()){ //텍스트가 바뀔때 index
                 
                   r[i].idx.push(index);
                   r[i].spans.push(spanCnt);
                   spanCnt = 1;
             
               }else{ //위 아래 텍스트가 같을 때
                 
                   spanCnt = spanCnt+1;
               }
               preText = $(this).text();
           });
       }
   }

  
   for(var k = col.length; k > 0; k--){ //역순으로 돌려야 그룹이 안깨짐
  
       $("table[id="+id+"] tr").find(td+":eq("+col[k-1]+")").each(function(index, item){
     
           if(r[k-1].idx[0] == index){
             
               $(this).attr("rowspan",r[k-1].spans[0]);
             
               r[k-1].idx.shift();
               r[k-1].spans.shift();
             
           }else{
             
               $(this).remove();
           }
       });
  
   }
}

 

 

[참고 사이트]

javascript Table cell merge(셀병합)