<html>
<title>동적 테이블</title>
<head>
<style>
table {
border: solid 1px;
}
th {
background: orange;
border: solid 1px;
}
td {
border: solid 1px;
}
table#t {
width: 500px;
height: 300px;
}
</style>
<script>
function TableController(){}
TableController.prototype = {
setId : function(aId) {
this.id = aId;
this.element = document.getElementById(aId);
this.tbody = this.element.getElementsByTagName("TBODY")[0];
},
getRows : function() {
return this.tbody.getElementsByTagName("TR");
},
getHeaders : function() {
return this.getRows()[0].getElementsByTagName("TH");
},
getCols : function(index) {
return this.getRows()[index].getElementsByTagName("TD");
},
makeCol : function() {
var aCol = document.createElement("TD");
var bindACol = aCol;
var bindThis = this;
aCol.onmouseover = function() {
bindACol.style.background = "red";
};
aCol.onmouseout = function() {
bindACol.style.background = "white";
};
aCol.onclick = function() {
bindThis.merge(bindACol);
};
return aCol;
},
merge : function(target) {
var parent = target.parentNode;
var adjacent = target.nextSibling || target.previousSibling;
parent.removeChild(target);
adjacent.colSpan = 2;
},
addRow : function() {
var aRow = document.createElement("TR");
var colLength = this.getHeaders(1).length;
var aCol;
for(var i=0; i<colLength; ++i) {
aCol = this.makeCol();
aCol.appendChild(document.createTextNode("Column "+(i+1)));
aRow.appendChild(aCol);
}
this.tbody.appendChild(aRow);
},
removeRow : function() {
var rows = this.getRows();
var rowLength = rows.length;
if(rowLength == 1) {
alert("헤더는 삭제할 수 없습니다.");
return;
}
this.tbody.removeChild(rows[rowLength-1]);
},
addCol : function() {
var colLength = this.getHeaders(1).length;
var rows = this.getRows();
var rowLength = rows.length;
var headers = this.getHeaders();
var headerLength = headers.length;
var aHead = document.createElement("TH");
aHead.appendChild(document.createTextNode("헤더 "+ ++headerLength));
rows[0].appendChild(aHead);
var aCol;
for(var i=1;i<rowLength; ++i) {
aCol = this.makeCol();
aCol.appendChild(document.createTextNode("Column "+(colLength+1)));
rows[i].appendChild(aCol);
}
},
removeCol : function() {
var colLength = this.getHeaders(1).length;
if(colLength == 1) {
alert("헤더는 삭제할 수 없습니다.");
return;
}
var rows = this.getRows();
var rowLength = rows.length;
var aCol = rows[0].getElementsByTagName("TH")[colLength-1];
rows[0].removeChild(aCol);
for(var i=1; i<rowLength; ++i) {
aCol = rows[i].getElementsByTagName("TD")[colLength-1];
rows[i].removeChild(aCol);
}
}
}
var tController;
window.onload = function() {
tController = new TableController();
tController.setId("t");
}
</script>
</head>
<body><center>
<form>
<input type="button" value="row추가" onclick="tController.addRow();">
<input type="button" value="row삭제" onclick="tController.removeRow();">
<input type="button" value="cols추가" onclick="tController.addCol();">
<input type="button" value="cols삭제" onclick="tController.removeCol();">
</form>
<table id="t">
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</table>
</body>
</html>
