JAVASCRIPT
[JAVASCRIPT] HTML table Rowspan 동적으로 적용하기 (dynamicRowspan)
Xmobile
2019. 11. 20. 22:37
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 |