Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2021, 10:18
Интересующийся
Отправить личное сообщение для javascript888 Посмотреть профиль Найти все сообщения от javascript888
 
Регистрация: 07.05.2021
Сообщений: 16

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

<!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, 20.06.2021 в 10:20.
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2021, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2022, 16:26
Новичок на форуме
Отправить личное сообщение для Dmitry133 Посмотреть профиль Найти все сообщения от Dmitry133
 
Регистрация: 11.10.2021
Сообщений: 2

можно подробней, что эта строчка делает
let length = document.querySelectorAll('tr:first-child > td').length;
зачем пуустой масив let lockdown = [];
и let arr = [i - length, i + length] ;
if(current == td || lockdown.includes(i)) return;
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2022, 17:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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; если нажали на текущую клетку или номер ячейки совпадает с индексом верхней или нижней ячейки ничего не делать более.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как сделать так, чтобы текст в ячейке переносился? webpuper ExtJS 4 06.09.2011 14:46
Как сделать так чтобы при нажатии на лого, он возвращал на главную страницу. Severance Flash 2 01.04.2011 16:25
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30