Tiny Excel

HTML

xxxxxxxxxx

14

1

<p>Inspired by <a href="http:///blog/spreadsheet.html">http:///blog/spreadsheet.html</a>. Features:</p>

2

3

<ul>

4

    <li>Under 30 lines of vanilla JavaScript</li>

5

    <li>Libraries used: <strong>none</strong></li>

6

    <li>Excel-like syntax (formulas start with "=")</li>

7

    <li>Support for arbitrary expressions (=A1+B2*C3)</li>

8

    <li>Circular reference prevention</li>

9

    <li>Automatic localStorage persistence</li>

10

</ul>

11

12

<table></table>

13

14

<footer><p>&copy; 2013 <a href="http://ondras./">Ond?ej ?ára</a></p></footer>

JavaScript

x

1

for (var i=0; i<6; i++) {

2

    var row = document.querySelector("table").insertRow(-1);

3

    for (var j=0; j<6; j++) {

4

        var letter = String.fromCharCode("A".charCodeAt(0)+j-1);

5

        row.insertCell(-1).innerHTML = i&&j  "<input id='"+ letter+i +"'/>" : i||letter;

6

    }

7

}

8

9

var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));

10

INPUTS.forEach(function(elm) {

11

    elm.onfocus = function(e) {

12

        e.target.value = localStorage[e.target.id] || "";

13

    };

14

    elm.onblur = function(e) {

15

        localStorage[e.target.id] = e.target.value;

16

        computeAll();

17

    };

18

    var getter = function() {

19

        var value = localStorage[elm.id] || "";

20

        if (value.charAt(0) == "=") {

21

            with (DATA) return eval(value.substring(1));

22

        } else { return isNaN(parseFloat(value))  value : parseFloat(value); }

23

    };

24

    Object.defineProperty(DATA, elm.id, {get:getter});

25

    Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});

26

});

27

(window.computeAll = function() {

28

    INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });

29

})();

30