Крошечный Excel на чистом JavaScript (30 строк кода)

• Около 30 строк классического JavaScript
• Использованные библиотеки: отсутствуют
• Синтаксис как в Excel (формулы начинаются с "=")
• Поддерживаются произвольные приложения (=A1+B2*C3)
• Обнаруживаются циклические ссылки
• Автоматическое сохнаниение в localStorage

HTML:

<table></table> 

input {     border: none;     width: 80px;     font-size: 14px;     padding: 2px; }  input:hover {     background-color: #eee; }  input:focus {     background-color: #ccf; }  input:not(:focus) {     text-align: right; }  table {     border-collapse: collapse;   }  td {     border: 1px solid #999;     padding: 0; }  tr:first-child td, td:first-child {     background-color: #ccc;     padding: 1px 3px;     font-weight: bold;     text-align: center; } 

JavaScript код:

for (var i=0; i<6; i++) {     var row = document.querySelector("table").insertRow(-1);     for (var j=0; j<6; j++) {         var letter = String.fromCharCode("A".charCodeAt(0)+j-1);         row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"'/>" : i||letter;     } }  var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input")); INPUTS.forEach(function(elm) {     elm.onfocus = function(e) {         e.target.value = localStorage[e.target.id] || "";     };     elm.onblur = function(e) {         localStorage[e.target.id] = e.target.value;         computeAll();     };     var getter = function() {         var value = localStorage[elm.id] || "";         if (value.charAt(0) == "=") {             with (DATA) return eval(value.substring(1));         } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }     };     Object.defineProperty(DATA, elm.id, {get:getter});     Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter}); }); (window.computeAll = function() {     INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} }); })(); 

Код на JSFiddle — http://jsfiddle.net/zag2art/b3pbw/4/