[JavaScript] HTML 테이블 동적 Rowspan
<html>
<head>
<script type="text/javascript">
function tableRowspan() {
var table = document.getElementById("tableTest");
var trList = table.getElementsByTagName("TR");
var beforeTdList = null;
for(var i=0; i < trList.length; i++){
var curTdList = trList[i].getElementsByTagName("TD");
if(beforeTdList == null) {
beforeTdList = curTdList;
continue;
}
for(var j=0; j < curTdList.length; j++){
if(curTdList[j].textContent == beforeTdList[j].textContent){
curTdList[j].setAttribute("class", "remove");
var beforeRowspan = beforeTdList[j].getAttribute("rowspan");
beforeRowspan = (beforeRowspan == null) ? 1 : beforeRowspan * 1;
beforeRowspan++;
beforeTdList[j].setAttribute("rowspan", beforeRowspan);
} else {
beforeTdList[j] = curTdList[j];
}
}
}
table = document.getElementById("tableTest");
var tdList = table.getElementsByClassName("remove");
for(var i = tdList.length-1; i != -1; i--){
tdList[i].remove();
}
}
</script>
</head>
<body>
<table id="tableTest" border="1">
<tbody>
<tr>
<td id="td_1_1">ID1</td>
<td id="td_1_2">강성태</td>
<td id="td_1_3">회사1</td>
<td id="td_1_4">등록</td>
</tr>
<tr>
<td id="td_2_1">ID1</td>
<td id="td_2_2">강성태</td>
<td id="td_2_3">회사1</td>
<td id="td_2_4">수정</td>
</tr>
<tr>
<td id="td_3_1">ID1</td>
<td id="td_3_2">김여름</td>
<td id="td_3_3">회사2</td>
<td id="td_3_4">삭제</td>
</tr>
</tbody>
</table>
<button onclick="tableRowspan();">Start
</button>
</body>
</html>