92行JavaScript程式碼實現的類似Excel外觀的UI
- 2020 年 3 月 10 日
- 筆記
源程式碼：
<html> <body onload = render();> <style type="text/css"> li { list-style: none; } li:before { /*content: "✓ ";*/ content: "A"; } 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; } footer { font-size: 80%; } </style> <script> var WIDTH = 10; var HEIGHT = 5; function render(){ for (var i=0; i< HEIGHT; i++) { var row = document.querySelector("table").insertRow(-1); for (var j=0; j < WIDTH; 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) {} }); })(); } </script> <table></table> </body> </html>如圖：
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙"
