javascript - 在特定条件下尝试禁用 DOM 创建的按钮

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";
            }
        }
    }
});

所以我决定也许制作一个禁用我的上/左/右/下的功能可能会更容易。我决定如果 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>