在某些情况下，尝试禁用DOM created按钮

Question

我正在尝试遍历一个4x4的网格，其中第一行是禁区。基本上，这给我们留下了一个3x4的网格。我有4个按钮来控制方向(上/下/左/右)。

如果我在4x2的位置(记住第一行不应该被访问，因为它是一个标题)，并且我按右键，应该不会发生任何事情，因为这将是第五个位置。如果我是在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";
            }
        }
    }
});

所以我决定做一个函数来禁用我的up/left/right/down可能更简单。我决定如果cellNum == 0-3可以禁用，如果cellNum == 0,4,8左边可以禁用，cellNum == 8-11关闭，如果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>

​