SOURCE

console 命令行工具 X clear

                    
>
console
    function bind() {
        var layout = document.getElementById('jsLayout');
        var tdNodeList = layout.getElementsByTagName('td');
        var length = tdNodeList.length;
        var curNode = event.target;
        if(curNode.tagName === 'TD') {
            for(var i = 0; i < length; i++) {
                tdNodeList[i].className = '';
            }
            curNode.id = 'dh';
            var tagName = curNode.tagName;
            var parentNode = curNode.parentElement;
            let childrenNode = parentNode.getElementsByTagName(tagName);
            var length = childrenNode.length;
            var num = 0;
            for(let i = 0; i < length; i++) {
                if(childrenNode[i].id === 'dh') {
                    num = i;
                    childrenNode[i].id = ''
                }
            }
            console.log("targetNum", num, layout);
            curNode.className='current';
            if(curNode.previousSibling) {
                var leftNode = curNode.previousSibling;
                leftNode.className='wrap';
            }
            if(curNode.nextSibling) {
                var rightNode = curNode.nextSibling;
                rightNode.className='wrap';
            }
            if(parentNode.previousElementSibling) {
                var topNode = selectNode(parentNode.previousElementSibling, num); 
                topNode.className='wrap';
                if(topNode.previousElementSibling) topNode.previousElementSibling.className='wrap';
                if(topNode.nextElementSibling) topNode.nextElementSibling.className='wrap';
            }
            if(parentNode.nextElementSibling) {
                var bottomNode = selectNode(parentNode.nextElementSibling, num);
                bottomNode.className='wrap';
                if(bottomNode.previousElementSibling) bottomNode.previousElementSibling.className='wrap';
                if(bottomNode.nextElementSibling) bottomNode.nextElementSibling.className='wrap';
            }
        }
    }

    function selectNode(parentNode, num) {
        var targetNode = parentNode.firstChild;
        for(j = 0; j < num; j++ ){
            if(targetNode.nextSibling) {
                targetNode = targetNode.nextSibling;
            }
        }
        return targetNode;
    }
<table id="jsLayout" onclick="bind()">
    <tbody>
        <tr><td class="current"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="wrap"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>
    body, html {
    margin: 0;
    }
    table {
        border-collapse: collapse;
        table-layout: fixed;
        margin: 10px auto;
    }
    td {
        border: 1px solid #E1E1E1;
        padding: 0;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    .current {
        background: #1D2088;
    }
    .wrap {
        background: #00A0E9;
    }