엑셀 흉내내기

<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>