Creating Excel in JavaScript

In this article, we will create an excel-like application that takes about 30 rows of JS code, with automatic saving to localStorage. No third party libraries are used. To create a formula, you can use “=”. You can also create arbitrary expressions like (=A1+B2*C3) and detect circular references.

HTML

<table> </table>

CSS

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 ? "" : 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) { } });
})();

Here is the fiddler example