Question

我不知道这些问题是否有任何重复，因为我甚至不知道如何查找，所以请告诉我这个问题是否已经存在。所以我有以下内容：我有一张桌子，如果你将鼠标悬停在桌子的一个单元格上，那个单元格应该变成红色。我想做的是：

上面/下面或旁边的一个单元格也应该变成红色，但只有其中一个，正如我所说的那样
按某个键时，另一个单元格应该变为红色

所以最后，你应该能够“四处走动”。通过单击某个键来确定一个单元格。我知道如何检测是否按下了一个键，但我不确定如何切换它切换单元格的部分。我正在考虑以下几点：

function myFunction (event) {
    if(event.ctrlKey) {
        //First cell becomes red
        if(event.ctrlKey) {
            //Second cell becomes red
        }
    }
};

......然而，我不知道这是否非常有效，如果没有更好的方法可以做到这一点。我非常喜欢业余，所以非常感谢帮助！如果您需要任何其他信息，请与我们联系。

编辑：这里是表格的HTML（希望它不会太长）

<div id="playerBoard" class="col-md-6 gameBoard">
        <table id="targetLocation">
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
                <th>G</th>
                <th>H</th>
                <th>I</th>
                <th>J</th>
            </tr>
            <tr>
                <th>1</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr>
                <th>2</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr>
                <th>3</th> 
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr> 
            <tr>
                <th>4</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr>
                <th>5</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr> 
                <th>6</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr> 
            <tr> 
                <th>7</th> 
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr> 
                <th>8</th> 
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr> 
                <th>9</th> 
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
            <tr> 
                <th>10</th>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
                <td><button class="cells" onmouseover="getTarget(this)">O</button></td>
            </tr>
        </table>    

    </div>

</div>

Answer 1

我希望这次我能正确理解你的目标，并且我已经更改了我的代码，请确保首先单击任何位置，否则ctrKey不起作用。您可以查看代码段

<强>样式

    td>button.cells:hover{
        background-color: red;
    }
    td>button.cells.selected{
        background-color: pink;
    }

<强> HTML

<div id="playerBoard" class="col-md-6 gameBoard">
<table id="targetLocation" cellpadding="3" border="1">
    <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th>I</th>
        <th>J</th>
    </tr>
    <tr>
        <th>1</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>2</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>3</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>4</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>5</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>6</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>7</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>8</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>9</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
    <tr>
        <th>10</th>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
        <td><button class="cells">O</button></td>
    </tr>
</table>

<强>的Javascript

    var activeCell = null;
var cells = document.querySelectorAll('button.cells');
Array.prototype.forEach.call(cells, function(cell, index) {//cells.forEach(function (cell) {
    cell.onmouseover = function (evt) {
        var cells = document.querySelectorAll('button.cells.selected');
        Array.prototype.forEach.call(cells, function(cell, index) {//cells.forEach(function (cell) {
            cell.classList.remove('selected');
        });
        activeCell = evt.target;
    }
    cell.onmouseout = function (evt) {
        activeCell = null;
    }
});
document.body.onkeydown = function(e) {
    if (e.which === 17 && activeCell != null) {
        if(activeCell.classList.contains('cells')) {
            var activeTd = activeCell.parentElement;
            var activeTr = activeCell.parentElement.parentElement;
            var rowsTr = document.querySelectorAll('#targetLocation tr');
            var leftCell = null;
            var rightCell = null;
            var upCell = null;
            var downCell = null;
            var x = null;
            var y = null;
            x = Array.prototype.indexOf.call(activeTr.children,activeTd)
            y = Array.prototype.indexOf.call(rowsTr,activeTr)
            console.log(x);
            console.log(y);
            if(x>1){
                leftCell = activeTr.children[x-1].children[0];
            }
            console.log(leftCell);
            if(x<10){
                rightCell = activeTr.children[x+1].children[0];
            }
            console.log(rightCell);
            if(y>1){
                upCell = rowsTr[y-1].children[x].children[0];
            }
            console.log(upCell);
            if(y<10){
                downCell = rowsTr[y+1].children[x].children[0];
            }
            console.log(downCell);
            if(leftCell){
                if (!leftCell.classList.contains('selected')) {
                    leftCell.classList.add('selected');
                }
            }
            if(rightCell){
                if (!rightCell.classList.contains('selected')) {
                    rightCell.classList.add('selected');
                }
            }
            if(upCell){
                if (!upCell.classList.contains('selected')) {
                    upCell.classList.add('selected');
                }
            }
            if(downCell){
                if (!downCell.classList.contains('selected')) {
                    downCell.classList.add('selected');
                }
            }
        }
    }else{
        var cells = document.querySelectorAll('button.cells.selected');
        Array.prototype.forEach.call(cells, function(cell, index) {
            cell.classList.remove('selected');
        });
    }
};
document.body.onkeyup = function(e) {
    if (e.which === 17) {
        var cells = document.querySelectorAll('button.cells.selected');
        Array.prototype.forEach.call(cells, function(cell, index) {
            cell.classList.remove('selected');
        });
    }
};

    var activeCell = null;
    var cells = document.querySelectorAll('button.cells');
    Array.prototype.forEach.call(cells, function(cell, index) {//cells.forEach(function (cell) {
        cell.onmouseover = function (evt) {
            var cells = document.querySelectorAll('button.cells.selected');
            Array.prototype.forEach.call(cells, function(cell, index) {//cells.forEach(function (cell) {
                cell.classList.remove('selected');
            });
            activeCell = evt.target;
        }
        cell.onmouseout = function (evt) {
            activeCell = null;
        }
    });
    document.body.onkeydown = function(e) {
        if (e.which === 17 && activeCell != null) {
            if(activeCell.classList.contains('cells')) {
                var activeTd = activeCell.parentElement;
                var activeTr = activeCell.parentElement.parentElement;
                var rowsTr = document.querySelectorAll('#targetLocation tr');
                var leftCell = null;
                var rightCell = null;
                var upCell = null;
                var downCell = null;
                var x = null;
                var y = null;
                x = Array.prototype.indexOf.call(activeTr.children,activeTd)
                y = Array.prototype.indexOf.call(rowsTr,activeTr)
                console.log(x);
                console.log(y);
                if(x>1){
                    leftCell = activeTr.children[x-1].children[0];
                }
                console.log(leftCell);
                if(x<10){
                    rightCell = activeTr.children[x+1].children[0];
                }
                console.log(rightCell);
                if(y>1){
                    upCell = rowsTr[y-1].children[x].children[0];
                }
                console.log(upCell);
                if(y<10){
                    downCell = rowsTr[y+1].children[x].children[0];
                }
                console.log(downCell);
                if(leftCell){
                    if (!leftCell.classList.contains('selected')) {
                        leftCell.classList.add('selected');
                    }
                }
                if(rightCell){
                    if (!rightCell.classList.contains('selected')) {
                        rightCell.classList.add('selected');
                    }
                }
                if(upCell){
                    if (!upCell.classList.contains('selected')) {
                        upCell.classList.add('selected');
                    }
                }
                if(downCell){
                    if (!downCell.classList.contains('selected')) {
                        downCell.classList.add('selected');
                    }
                }
            }
        }else{
            var cells = document.querySelectorAll('button.cells.selected');
            Array.prototype.forEach.call(cells, function(cell, index) {
                cell.classList.remove('selected');
            });
        }
    };
    document.body.onkeyup = function(e) {
        if (e.which === 17) {
            var cells = document.querySelectorAll('button.cells.selected');
            Array.prototype.forEach.call(cells, function(cell, index) {
                cell.classList.remove('selected');
            });
        }
    };

        td>button.cells:hover{
            background-color: red;
        }
        td>button.cells.selected{
            background-color: pink;
        }

<div id="playerBoard" class="col-md-6 gameBoard">
    <table id="targetLocation" cellpadding="3" border="1">
        <tr>
            <th></th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
            <th>G</th>
            <th>H</th>
            <th>I</th>
            <th>J</th>
        </tr>
        <tr>
            <th>1</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>2</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>3</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>4</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>5</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>6</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>7</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>8</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>9</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
        <tr>
            <th>10</th>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
            <td><button class="cells">O</button></td>
        </tr>
    </table>

</div>

Answer 2

不确定这究竟是你的追随者。

但是如果你悬停细胞将变为红色，按下光标键将突出显示粉红色所选方向的细胞。

请注意，请点击代码段窗口以将其聚焦以触发键盘事件。

＆＃13;

let selected = null;

const table = document.createElement("table");
for (let y = 0; y < 6; y ++) {
  const tr = document.createElement("tr");
  table.appendChild(tr);
  for (let x = 0; x < 6; x ++) {
    const td = document.createElement("td");
    td.dataset.pos = `${x}:${y}`;
    tr.appendChild(td);
  }
}
document.body.appendChild(table);


document.body.addEventListener('mouseenter', function (ev) {
  selected = ev.target;
}, true);

const keys = {
  "ArrowDown": { y: +1 },
  "ArrowUp": { y: -1 },
  "ArrowLeft": { x: -1 },
  "ArrowRight": { x: +1 }
};

document.body.addEventListener("keydown", function (ev) {
  ev.preventDefault();
  ev.stopPropagation();
  if (!selected) return;
  const pos = selected.dataset.pos.split(":").map(Number);
  const k = keys[ev.key];
  pos[0] += k.x | 0;
  pos[1] += k.y | 0;
  table.querySelector(`[data-pos="${pos.join(":")}"]`).classList.add("selected");
}, true);

document.body.addEventListener("keyup", function (ev) {
  ev.preventDefault();
  ev.stopPropagation();
  for (let i of table.querySelectorAll("td")) {
    i.classList.remove("selected");
  }
}, true);

＆＃13;

td { width:20px; height:20px; border: 1px solid black; }
td:hover { background-color: red }

.selected {
 background-color: pink;
}

＆＃13;

按下某个键时标记不同的单元格（JavaScript）

2 个答案: