HTML에서 Table을 세로값이 같으면 cell merge가 되어야 보기좋게 표현할 수 있습니다.
그려진 table에 대해서 동적으로 값을 비교하면서 Rowspan을
계산하여 적용하는 함수입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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();
    }
}
cs

+ Recent posts