當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
92行JavaScript代码实现的类似Excel外观的UI
生活随笔
收集整理的這篇文章主要介紹了
92行JavaScript代码实现的类似Excel外观的UI
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
源代碼：
<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的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的92行JavaScript代码实现的类似Excel外观的UI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 神经元分类
- 下一篇： 另一个伊甸布里亚要不要培养 布里亚怎么样