Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 08.08.2019, 10:21   #1
ara05ru
 
Регистрация: 01.02.2018
Сообщений: 8
Репутация: 10
По умолчанию [РЕШЕНО] Использовать клавиши со стрелками для перемещения по таблице HTML.

Помогите новичку в js. Нашел вот такой код для использования стрелок клавиатуры для перемещения по таблице HTML. Только проблема в том, что начальная ячейка для перемещения начинается всегда с одной и той же. А нужно чтоб начиналось с той, которую кликнул.
Код:
var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = 'green';
start.style.color = 'white';

function dotheneedful(sibling) {
  if (sibling != null) {
    start.focus();
    start.style.backgroundColor = '';
    start.style.color = '';
    sibling.focus();
    sibling.style.backgroundColor = 'green';
    sibling.style.color = 'white';
    start = sibling;
  }
}

document.onkeydown = checkKey;

function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '38') {
    // up arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.previousElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '40') {
    // down arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.nextElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '37') {
    // left arrow
    var sibling = start.previousElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '39') {
    // right arrow
    var sibling = start.nextElementSibling;
    dotheneedful(sibling);
  }
}
Код:
table {
  border-collapse: collapse;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
Код:
<table>
  <tbody>
    <tr>
      <td id='start'>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>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>
ara05ru вне форума   Ответить с цитированием
Старый 08.08.2019, 13:09   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,792
Репутация: 2359
По умолчанию

https://jsfiddle.net/pe3fodz5/
убрал установку старта из начала
добавил проверок в код на случай если старт не существует
добавил лиснер на клик и установку старта в нем

если интересно разобраться, то я заюзал spread|rest оператор (...), 2 стрелочные функции (() => {}), остальное гуглится по названию
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 08.08.2019, 13:11   #3
ara05ru
 
Регистрация: 01.02.2018
Сообщений: 8
Репутация: 10
Хорошо

Спасибо большое. То что нужно.
ara05ru вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[РЕШЕНО]: Приемлимо использовать стили (ширина, высота, фон ну и т.д.) к строке таблицы? spirit-ua HTML и CSS 2 19.06.2015 09:08
[РЕШЕНО]: Отступы html Пиу Пиуу HTML и CSS 2 15.02.2015 15:44
клавиши со стрелками в Windows Forms senator2202 Общие вопросы C/C++ 0 19.03.2010 11:07
Макросы перемещения в таблице Окоча Юра Microsoft Office Excel 2 22.01.2010 17:30
Как сделать чтобы во время поиска по таблице не было видно перемещения по dbgrid? alxsev БД в Delphi 4 10.04.2009 19:03


14:00.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.