Question

我正在尝试遍历第一行不受限制的4x4网格。从本质上讲，这给我们留下了3x4网格。我有4个控制方向的按钮（向上/向下/向左/向右）。

如果我在4x2的位置（记住第一行不应该被访问，因为它是一个标题），我按下Right，没有任何事情发生，因为这将是第5点。如果我是1x2，我也不能按下左键。最后，如果我在底行（1x4,2x4,3x4或4x4）的任何位置，我应该无法按向下箭头。

不幸的是，我无法理解正确/向左/向下/向上的事情。这就是我试过的：

down.addEventListener("click",function()
{   
    if(document.getElementsByTagName("td")[cellCounter] != 3)
    {
        if(document.getElementsByTagName("td")[cellCounter] != 7)
        {
            if(document.getElementsByTagName("td")[cellCounter] != 11)
            {
                cellCounter += 4;
                document.getElementsByTagName("td")[cellCounter].style.border = "5px solid black";
                document.getElementsByTagName("td")[cellCounter-4].style.border = "1px solid black";
            }
        }
    }
});

所以我决定制作一个能够禁用我的向上/向左/向右/向下的功能可能会更容易。我决定，如果cellNum == [0-3]可以禁用up，如果可以禁用cellNum == [0,4,8]，则cellNum == [8-11] down，如果cellNum == [ 3,7,11]该权利可以被禁用。

我如何实现这一点？如何禁用没有ID的按钮以及如何识别？您可以查看我的主要工作代码here

Answer 1

好的，我将为您提供一个如何解决问题的示例。试一试，让我们知道你在做什么以及你尝试了什么。

var table = document.getElementById('table');
var up = document.getElementById('up');
var down = document.getElementById('down');

var ri = 1, ci = 0;

up.addEventListener('click', function(e){
   highlight(-1);
});

down.addEventListener('click', function(e){
   highlight(1);
});

function highlight(offset){
   
   if((ri + offset) > 0 && (ri + offset < table.rows.length)){
     table.rows[ri].cells[ci].style.background = 'initial';
     ri = ri + offset;
     table.rows[ri].cells[ci].style.background = '#A7A8A9';
     
   }
   else if((ri + offset) == 0){
     table.rows[1].cells[ci].style.background = '#A7A8A9';
   }
   else{
       table.rows[table.rows.length - 1].cells[ci].style.background = '#A7A8A9';
   }
}

<table border='1' id='table'>
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
    <tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
    <tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
    <tr><td>Cell 3,1</td><td>Cell 3,3</td><td>Cell 3,3</td></tr>
</table>

<button id='up'>Up</button>
<button id='down'>Down</button>

在某些条件下尝试禁用DOM创建的按钮

1 个答案: