javascript - 동적 rowspan (동일한 td 병합)

[예1]

$(document).ready(function(e){
    genRowspan("td 클래스명");
});
 
function genRowspan(className){
    $("." + className).each(function() {
        //var rows = $("." + className + ":contains('" + $(this).text() + "')");
        var sText = $(this).text();
        var rows = $("." + className).filter(function() {
        return $(this).text() == sText;
        });
        if (rows.length > 1) {
            rows.eq(0).attr("rowspan", rows.length);
            rows.not(":eq(0)").remove();
        }
    });
}

출처 : https://dev.uhoon.co.kr/entry/%EC%9C%A0%EB%8F%99%EC%A0%81%EC%9D%B8-%ED%85%8C%EC%9D%B4%EB%B8%94-Td-%EC%85%80-%EB%B3%91%ED%95%A9-rowspan-%EC%B2%98%EB%A6%AC-Javascript-%ED%95%A8%EC%88%98




[예2]

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(); //병합될 값들 숨김처리
      }
    }
  })
}

출처 : https://bman-note.tistory.com/14




[예3]

function dynamicRowSpan() {
    var table = document.getElementById("table");
    var trArr = table.getElementsByTagName("tr");
    var thCnt = table.rows[0].getElementsByTagName("th").length;
    
    for (var tdIdx = thCnt-1; tdIdx >= 0; tdIdx--) {
        var rowSpan = 0;
        var compText = '';
        for (var trIdx = 1; trIdx < trArr.length; trIdx++) {
            var td = table.rows[trIdx].cells[tdIdx]; 
            if (compText == '') {
                compText = td.outerText;
                continue;
            }
            if (compText == td.outerText) {
                rowSpan++;
                td.setAttribute("class", "del");
            } else {
                var td = table.rows[trIdx-1-rowSpan].cells[tdIdx];
                td.setAttribute("rowspan", rowSpan+1);
                rowSpan = 0;
                compText = table.rows[trIdx].cells[tdIdx].outerText;
            }
 
            if ( trIdx == trArr.length-1 && rowSpan > 0 ) {
                var cell = table.rows[trIdx-rowSpan].cells[tdIdx];
                cell.setAttribute("rowspan", rowSpan+1);
                rowSpan = 0;
                compText = '';
            }
        }
    }
 
    table = document.getElementById("table");
    var dels = table.getElementsByClassName("del");
    for(var i = dels.length-1; i >= 0; i--){
        dels[i].remove();
    }
}

출처 : https://xmobile.tistory.com/entry/HTML-table-Rowspan-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-dynamicRowspan





[예4]

$.fn.mergeClassRowspan = function (colIdx) {
    return this.each(function () {
        var that;
        $('tr', this).each(function (row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                if ($(this).attr('class') == $(that).attr('class')) {
                    rowspan = $(that).attr("rowspan") || 1;
                    rowspan = Number(rowspan) + 1;
                    $(that).attr("rowspan", rowspan);
                    $(this).hide();
                } else {
                    that = this;
                }
                that = (that == null) ? this : that;
            });
        });
    });
};
/* 사용 */
$(function(){
    $('.testTbody').mergeClassRowspan(0);
    $('.testTbody').mergeClassRowspan(1);
    $('.testTbody').mergeClassRowspan(3);
});

출처 : https://madinthe90.tistory.com/50

[예5]

<script> 

$(document).ready(function(){ 

  $(".table_id").each(function () { 

  var rows = $(".table_id:contains('" + $(this).text() + "')"); 

    if (rows.length > 1) { //동일한 rows값이 1개 이상이면 열을 합침 

    rows.eq(0).attr("rowspan", rows.length); 

    rows.not(":eq(0)").remove(); 

    }

  }); 

}); 

</script>

출처 : https://eggwhite0.tistory.com/110

[예6]

$(document).ready(function(e){

    genRowspan("td 클래스명");

});

 

function 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();

        }

    });

}

https://zero-gravity.tistory.com/311