Javascript-форум - Как Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее сосед

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее сосед (https://javascript.ru/forum/misc/82731-kak-sdelajjte-tak-chtoby-v-dlya-aktivirovannojj-yachejjki-nelzya-bylo-aktivirovat-ee-sosed.html)

Как Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее сосед

Как Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее соседей сверху и снизу.
Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее соседей сверху и снизу.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>focusout</title>
</head>
<body>
<table id='table'>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>




<script>
    let trs = document.querySelectorAll('tr');
    let tds = document.querySelectorAll('td');

    for (let i = 0; i < tds.length; i++){
        tds[i].addEventListener('click',function func () {
            tds[i].classList.add('active');

            let parent = tds[i].parentElement;
            let top = parent.previousElementSibling;
            let down = parent.nextElementSibling;
            let arrTop = top.children;
            let arrDown = down.children;

            console.log (arrTop, arrDown);
            if (arrTop) {
                arrTop[i].removeEventListener ('click', func);
            }
            if (arrDown) {
                arrDown[i].removeEventListener ('click', func);
            }
        })};
</script>
</body>
</html>

javascript888,

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>up and down</title>
    <style type="text/css">
    table{
        border-collapse: collapse;
    }

    td{
        height: 40px;
        width: 40px;
        border: 1px solid rgba(0, 0, 128, 1);
        text-align: center;
    }

    .active{
        background-color: rgba(255, 0, 255, 1);
    }

    </style>
</head>
<body>
<table id='table'>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>
<script>
    let length = document.querySelectorAll('tr:first-child > td').length;
    let tds = document.querySelectorAll('td');
    let lockdown = [];
    let current;
    for (let i = 0; i < tds.length; i++){
        let td = tds[i];
        let arr = [i - length, i + length] ;
        td.addEventListener('click',function func () {
            if(current == td || lockdown.includes(i)) return;
            if(current) current.classList.remove('active')
            td.classList.add('active');
            lockdown = arr;
            current = td;
        })};
</script>
</body>
</html>

можно подробней, что эта строчка делает
let length = document.querySelectorAll('tr:first-child > td').length;
зачем пуустой масив let lockdown = [];
и let arr = [i - length, i + length] ;
if(current == td || lockdown.includes(i)) return;

Dmitry133,
let length - количество колонок в таблице. (легче вычислить что снизу или вверху)
lockdown - хранит номер(индексы) ячейки вверху и в низу, от текущей.
условно текущая ячейка номер 2 (индекс 1) массив будет хранить [-3, 5]
на 6 ячейку нельзя будет нажать(индекс 5), ячейки с индексом -4 не существует.

условно текущая ячейка номер 7 (индекс 6) массив будет хранить [2, 10]
на 3 ячейку сверху нельзя будет нажать(индекс 2), и также 11 ячейка будет заблокирована (индекс 10)

if(current == td || lockdown.includes(i)) return; если нажали на текущую клетку или номер ячейки совпадает с индексом верхней или нижней ячейки ничего не делать более.