miniexcel.html - randomcrap - random crap programs of varying quality
(HTM) git clone git://git.codemadness.org/randomcrap
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
miniexcel.html (2823B)
---
1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8" />
4 <title>TEST</title>
5 <style type="text/css">
6 :root {
7 --cell-border-color: #ccc;
8 --cell-focus-bg-color: #ccf;
9 --cell-hover-bg-color: #eee;
10 --side-cell-bg-color: #eee;
11 --cell-font: monospace;
12 }
13 body {
14 margin: 0;
15 padding: 0;
16 }
17 .sheet input {
18 border: 0;
19 font-family: var(--cell-font);
20 font-size: 14px;
21 padding: 2px;
22 width: 80px;
23 }
24 .sheet input:hover {
25 background-color: var(--cell-hover-bg-color);
26 }
27 .sheet input:focus {
28 background-color: var(--cell-focus-bg-color);
29 }
30 .sheet input:not(:focus) {
31 text-align: right;
32 }
33 .sheet table {
34 border-collapse: collapse;
35 font-family: var(--cell-font);
36 }
37 .sheet td {
38 border: 1px solid var(--cell-border-color);
39 padding: 0;
40 }
41 .sheet tr:first-child td {
42 font-weight: bold;
43 background-color: var(--side-cell-bg-color);
44 border: 1px solid var(--cell-border-color);
45 border-top: 0;
46 border-bottom: 1px solid var(--cell-border-color);
47 padding: 1px 3px;
48 text-align: center;
49 }
50 .sheet td:first-child {
51 background-color: var(--side-cell-bg-color);
52 border-right: 1px solid var(--cell-border-color);
53 font-weight: bold;
54 padding: 1px 3px;
55 text-align: right;
56 }
57 </style>
58 </head>
59 <body>
60
61 <div class="sheet"><table></table></div>
62
63 <script type="text/javascript">
64 function sheet_column_name(v) {
65 var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
66 var s = "";
67 for (v = parseInt(v); v >= 26; ) {
68 var x = (Math.floor(v) - 26) % 26;
69 s = tab[x] + s;
70 v = (v - x) / 26;
71 }
72 return tab[v % 26] + s;
73 }
74
75 var width = 24;
76 var height = 100;
77
78 var letters = [];
79 for (var x = 0; x < width; x++)
80 letters.push(sheet_column_name(x));
81
82 for (var y = 0; y < height; y++) {
83 var row = document.querySelector(".sheet table").insertRow(-1);
84 for (var x = 0; x < width; x++) {
85 var letter = letters[x - 1];
86 if (x == 0 && y == 0)
87 row.insertCell(-1).innerHTML = "";
88 else
89 row.insertCell(-1).innerHTML = x && y ? "<input id='" + letter + y + "'/>" : y || letter;
90 }
91 }
92
93 var DATA = {}, INPUTS =[].slice.call(document.querySelectorAll("input"));
94 INPUTS.forEach(function(elm) {
95 elm.onfocus = function(e) {
96 e.target.value = localStorage[e.target.id] || "";
97 };
98 elm.onblur = function(e) {
99 localStorage[e.target.id] = e.target.value;
100 computeAll();
101 };
102 var getter = function() {
103 var value = localStorage[elm.id] || "";
104 if (value.charAt(0) == "=") { // formula ev{a,i}l as JS.
105 // context with DATA so the cells can be referenced as variables.
106 with (DATA) return eval(value.substring(1));
107 } else {
108 return isNaN(parseFloat(value)) ? value : parseFloat(value);
109 }
110 };
111 Object.defineProperty(DATA, elm.id, {get: getter});
112 Object.defineProperty(DATA, elm.id.toLowerCase(), {get: getter});
113 });
114
115 (window.computeAll = function() {
116 INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
117 })();
118 </script>
119 </body>
120 </html>