Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.08.2019, 09:21   #1
ara05ru
 
Регистрация: 01.02.2018
Сообщений: 9
По умолчанию [РЕШЕНО] Использовать клавиши со стрелками для перемещения по таблице 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, 12:09   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

если интересно разобраться, то я заюзал spread|rest оператор (...), 2 стрелочные функции (() => {}), остальное гуглится по названию
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 08.08.2019, 12:11   #3
ara05ru
 
Регистрация: 01.02.2018
Сообщений: 9
Хорошо

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


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