92行JavaScript代码实现的类似Excel外观的UI

   </div><div data-lake-id="87ecba8698b09549a96e1f9e9b54bf89">    li {</div><div data-lake-id="8b1d6f3131cac917894b3b135982850a">        list-style: none;</div><div data-lake-id="252cf019c09f54deb2b15c31ea8d22a5">    }</div><div data-lake-id="164ad88c7cc90387407e92cb5ecffea6">    li:before {</div><div data-lake-id="fe504f560b6c3e39df6dacbfe2777397">        /*content: "✓ ";*/</div><div data-lake-id="2d3e029f66fbbbda2fc1f548e2ab5a4a">        content: "A";</div><div data-lake-id="1edee4d7c49144d2d3d5be0504d695b2">    }</div><div data-lake-id="827ae01a491922334b831b9de918ba99">    input {</div><div data-lake-id="80dfaf7f5ae028e2b76fe78f362b45e1">        border: none;</div><div data-lake-id="35f3949f0ee7df9e404560d7cee85a4e">        width: 80px;</div><div data-lake-id="1702219530035960e36490123001591d">        font-size: 14px;</div><div data-lake-id="267e76c5ff4080b86b4c463142a02bb6">        padding: 2px;</div><div data-lake-id="42a4df306fdbdc56a04b36e3790938a6">    }</div><div data-lake-id="58ba68c21556a7f02e050fe8982727c8">    input:hover {</div><div data-lake-id="699b632d10f977714265cccdf825234c">        background-color: #eee;</div><div data-lake-id="e90d1a13ac98d310470d4022762db86e">    }</div><div data-lake-id="2940c199cc3a6c2eaf0c2a6be514cab6">    input:focus {</div><div data-lake-id="e64ad5964999e17af3be68389faf0a16">        background-color: #ccf;</div><div data-lake-id="85de5eb4c4bedf773795f1d28324b1e8">    }</div><div data-lake-id="f7e5d11041d1f189406b92cd3541d370">    input:not(:focus) {</div><div data-lake-id="1924e1c632362d87d156aca617c547fe">        text-align: right;</div><div data-lake-id="f186bea5fd21573f5ac653fff7e9b025">    }</div><div data-lake-id="dd7359ba61dc5a08a6e80068ba14eb7d">    table {</div><div data-lake-id="d53208076ded605269617feffb5c6ae4">        border-collapse: collapse;  </div><div data-lake-id="2aacbe6dc1818ad0bb4349fd550291ab">    }</div><div data-lake-id="1404fb0a9947c3830b561e1b43f67088">    td {</div><div data-lake-id="a47b291d2925b661ca478629bd5842e0">        border: 1px solid #999;</div><div data-lake-id="e0188f69b6129733c1ab3099887f5e47">        padding: 0;</div><div data-lake-id="c28adfe4b3863f3c944432f8d53bbe64">    }</div><div data-lake-id="a2e74d2c341865c2f25961b4dde0d5c5">    tr:first-child td, td:first-child {</div><div data-lake-id="5fe889928067da0e97a111fbef6c4063">        background-color: #ccc;</div><div data-lake-id="1a5177f7e3a129aac8b7a6220dc2cc78">        padding: 1px 3px;</div><div data-lake-id="eff5265df5284f87bf8e56ecf80492e7">        font-weight: bold;</div><div data-lake-id="c27ff8d8893faf81d7138b1a798b39e9">        text-align: center;</div><div data-lake-id="85e348e49541c03b771843ce7b72eb6e">    }</div><div data-lake-id="ab8eb93c7761fcbdc30ab91b122fffb9">    footer {</div><div data-lake-id="97ad95fd5f8d31e611725bf3d317d871">        font-size: 80%;</div><div data-lake-id="daef5318030d0ef762adfa5c6613587d">    }</div><div data-lake-id="6af0c13991fac7fc8a1cbc2ac6669a7d">    

   </div><div data-lake-id="190abfa2b09186522b66c445e8c5e391">    var WIDTH = 10;</div><div data-lake-id="1b1a6588f56992eefa3c29ae13af49b4">    var HEIGHT = 5;</div><div data-lake-id="15277847b32fe32f49abbd94c489ca6b">    function render(){</div><div data-lake-id="8a2be23f7d562251926a926b8153f384">        for (var i=0; i< HEIGHT; i++) {</div><div data-lake-id="74c25aaf60ed36a3e8cc84d1c7b5e924">            var row = document.querySelector("table").insertRow(-1);</div><div data-lake-id="1a963321f90978dbe1b9e175afd7084a">            for (var j=0; j < WIDTH; j++) {</div><div data-lake-id="aa6dc4d158dbd0160a3751218d767f81">                var letter = String.fromCharCode("A".charCodeAt(0)+j-1);</div><div data-lake-id="0d6b20329049363a7ee16e2b31a08cf6">                row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"'/>" : i||letter;</div><div data-lake-id="8bc9a987808438f1fac1fc1adb4bb4bb">            }</div><div data-lake-id="e82858a5459ce5e105ee75f25c2e841b">        }</div><div data-lake-id="6daf622f04e73962b281457f8ca605c4">        var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));</div><div data-lake-id="cf965e7769a7db549c361f4bb68a0ac0">        INPUTS.forEach(function(elm) {</div><div data-lake-id="05c41fb21af70d109c6fa70eaecba3f3">            elm.onfocus = function(e) {</div><div data-lake-id="d1aa457422c05768434d15c28a764cc7">                e.target.value = localStorage[e.target.id] || "";</div><div data-lake-id="052570b7102ea1b7238c6faec5811277">            };</div><div data-lake-id="ffce15601704964f30b8af84896451d4">            elm.onblur = function(e) {</div><div data-lake-id="789915e49ee20fb46023f2f823b2dda7">                localStorage[e.target.id] = e.target.value;</div><div data-lake-id="8a21f840eba429dcbe5e91ee5ccd5f83">                computeAll();</div><div data-lake-id="74b56bcc58bf6fe86a8e4e5db4c63dcc">            };</div><div data-lake-id="30ba9016af97dcce9c350152f35d177a">            var getter = function() {</div><div data-lake-id="82f5dd2c045bdb9d289a3d92acbbbe7d">                var value = localStorage[elm.id] || "";</div><div data-lake-id="7dbe76557c146c5c461c0989cd6a0681">                if (value.charAt(0) == "=") {</div><div data-lake-id="f413558b70fb89804befcca38cb98485">                    with (DATA) return eval(value.substring(1));</div><div data-lake-id="1cf002fdd78c2396818a8f5fdfb8c8c6">                } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }</div><div data-lake-id="fe4b9636a5b1a148ef09c6b44ee89799">            };</div><div data-lake-id="12fa0448165d55ace012e2eb842c0fb0">            Object.defineProperty(DATA, elm.id, {get:getter});</div><div data-lake-id="71fb97f5fbcf98a216b56dd857cb1a8b">            Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});</div><div data-lake-id="55ee28bf67f6db20fe43bd4e260fc93e">        });</div><div data-lake-id="a80359cd71c29f503a2b2ea7d46772fd">        (window.computeAll = function() {</div><div data-lake-id="7a707b17947e51583c3bd3896f868061">            INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });</div><div data-lake-id="a77c53795320f3637bd348d5410aec9e">        })();</div><div data-lake-id="6ec153dbc42b32676585114d0a6a95a1">    }</div><div data-lake-id="04d2241799c69bde5d70aed85c527c22">    

   

92行JavaScript代码实现的类似Excel外观的UI92行JavaScript代码实现的类似Excel外观的UI

上一篇:虚拟化的蜕变 VMware全面发力云计算


下一篇:【百度地图API】多家地图API文件大小对比