提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScriptExcelUI代码 实现 类似 外观 92
2023-09-14 09:03:56 时间

源代码：

<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的原创文章，请关注公众号"汪子熙":

相关文章