엑셀 흉내내기
<style>
#excel {width: 800px; height: 400px; overflow: auto; border: 1px solid #ccc}
#excel table { width: 2000px; border-spacing:0 }
#excel table th {font-weight: normal; background-color: #eee}
#excel table th, #excel table td { height: 20px; border: 1px solid #ddd; }
#excel table td {text-align: right; padding: 0; }
#excel table input {border:none; border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px; outline-style: none; font-size: 1em }
</style>
<div id="excel"></div>
<script>
function Excel(label, rows, cols) {
this.div = document.getElementById(label);
this.table = document.createElement('table');
this.rows = rows;
this.cols = cols;
this.clicked = null;
this.cells = [];
}
Excel.prototype.init = function() {
var tr = {}, el = {}, r = 0, c = 0, tr = document.createElement('tr')
for (c=0; c<this.cols; c++) {
el = document.createElement('th');
el.style.width = Math.round(100 / this.cols * 10) / 10 + '%';
if (c != 0) el.textContent = String.fromCharCode(64 + c);
tr.appendChild(el);
}
this.table.appendChild(tr);
for (r=1; r<this.rows; r++) {
tr = document.createElement('tr');
for (c=0; c<this.cols; c++) {
if (c !=0) el= document.createElement('td');
else {
el= document.createElement('th');
el.textContent = r;
}
tr.appendChild(el);
}
this.table.appendChild(tr);
}
this.div.appendChild(this.table);
};
Excel.prototype.getPos = function(obj) {
var pos = {};
pos.r = obj.parentNode.rowIndex;
pos.c = obj.cellIndex;
return pos;
}
Excel.prototype.click = function() {
var td = this, textbox, text, pos = excel.getPos(this);
if (excel.clicked != null) excel.clicked.style.border = '1px solid #ddd';
this.style.border = '1px solid blue';
excel.clicked = this;
textbox = document.createElement('input');
if (this.hasChildNodes()) {
if (this.firstChild.nodeName == 'INPUT') return;
else {
text = this.firstChild.textContent;
textbox.value = excel.cells[pos.r + ',' + pos.c];
this.removeChild(this.firstChild);
}
}
textbox.type = 'text';
textbox.style.width = (this.offsetWidth - 2) + 'px';
textbox.style.height = (this.offsetHeight - 4) + 'px';
this.appendChild(textbox);
this.firstChild.focus();
textbox.onblur = function(){
text = this.value;
this.remove(0);
excel.cells[pos.r + ',' + pos.c] = text;
if (text.match(/^=/)) text = eval( text.replace('=', '') );
td.textContent = text;
};
}
Excel.prototype.edit = function() {
var table, tr = {}, el = {}, r = 0, c = 0,
table = this.div.childNodes[0];
for (r=1; r<this.rows; r++) {
for (c=1; c<this.cols; c++) {
el = table.rows[r].cells[c];
el.onclick = this.click;
el.onkeydown = this.keydown;
}
}
};
Excel.prototype.keydown = function(e) {
var pos = excel.getPos(this), e = e || window.event;
switch (e.keyCode) {
case 38 : pos.r -= 1; break;
case 40 : case 13: pos.r += 1; break;
case 37 : pos.c -= 1; break;
case 39 : pos.c += 1; break;
}
if (pos.r < 1 || pos.r > excel.rows-1 || pos.c < 1 || pos.c > excel.cols-1) return;
excel.table.rows[pos.r].cells[pos.c].click();
};
var excel = new Excel('excel', 40, 27);
excel.init();
excel.edit();
</script>