javascript Table cell merge(셀병합)

* 이 소스는 제이쿼리가 필요합니다.

table cell merge에 관한 자바스크립트를 찾을려고 했지만, 구글도 도와주지 않는지 내 검색 키워드가 잘못된 건지 나오지는 않더라... 그래서 직접 만들어봤습니다!!

처음에 만들려고 마음 먹었다가 귀찮아서 손 놓고 놀고 있다가, 이 기능을 찾는 친구가 있어서... ㅠ

될듯 안 될듯 개빡세네요... ㅠ

소스는 다음과 같습니다.

샘플소스 다운로드

tableMerge.html

샘플 예제

http://toyuq.woobi.co.kr/dev/tableMerge.html

 
fn_cellMerge('table_id', [0,1,2]);
 
 
 
/** Function, Table Cell Merge
 *
 * @param : table id
 * @param : arrangement of column, ex) [0, 1, 2]
 * @param : group tag of column [option]
 * @author : toyuq
 * @version : 2017.09.22
 */ 
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();
            }
        });
   
    }
}