Creating Excel in JavaScript

Total: 3 Average: 2.7

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

Andrey Langovoy

Andrey Langovoy

Andrey Langovoy is a team leader at Devart. He takes part in development and testing database management tools for SQL Server, writes articles about SQL Server and contributes to open source projects, MSDN and MDN.