Javascript.RU

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

Перемещение стрелками по полям формы
Есть большая таблица, где ячейками являются input'ы. Нужно сделать, чтобы по этим инпутам можно было перемещаться стрелками, как в экселе.
Таблица упрощенно такая:
<table>
<tr><td><input id=price19></td><td><input id=quantity19></td><td><input id=size19></td></tr>
<tr><td><input id=price540></td><td><input id=quantity540></td><td><input id=size540></td></tr>
<tr><td><input id=price7></td><td><input id=quantity7></td><td><input id=size7></td></tr>
<tr><td><input id=price192></td><td><input id=quantity192></td><td><input id=size192></td></tr>
<tr><td><input id=price37></td><td><input id=quantity37></td><td><input id=size37></td></tr>
</table>

Всем инпутам прописаны id, по ним идет адресация для различных скриптов. Эти id образуются просто из обозначения по-смыслу + номер товара. Например, количество для 19 товара будет id="quantity19". То есть, в каждой колонке у инпута название образуется из заданного + номер. Номера товаров по строкам идут не по порядку, конечно.
Как я понимаю, для реализации навигации стрелками надо сделать массивы из возможных названий (смысловых) и номеров, встречающихся в id, и по ним смотреть куда передавать фокус.
Например, для вышеприведенной таблица массивы такие:
Код:
var list_id = new Array (price, quantity, size);       
var list_id = new Array (19, 540, 7, 192, 37);
Стрелочками влево-вправо - перемещаемся по верхнему массиву. Стрелочками вверх-вниз - по нижнему.
Подскажите, как это реализовать?

Последний раз редактировалось copenhagen, 10.09.2011 в 17:37.
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2011, 17:30
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

<table>
<tr><td><input id=price19></td><td><input id=quantity19></td><td><input id=size19></td></tr>
<tr><td><input id=price540></td><td><input id=quantity540></td><td><input id=size540></td></tr>
<tr><td><input id=price7></td><td><input id=quantity7></td><td><input id=size7></td></tr>
<tr><td><input id=price192></td><td><input id=quantity192></td><td><input id=size192></td></tr>
<tr><td><input id=price37></td><td><input id=quantity37></td><td><input id=size37></td></tr>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('table input').keydown(function(e) {
    var td;
    switch (e.keyCode) {
      case 39: // right
        td = $(this).parent('td').next();
        break;
      
      case 37: // left
        td = $(this).parent('td').prev();
        break;
        
      case 40: // down
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').next().find('td:nth-child(' + i + ')');
        break;
        
      case 38: // up
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').prev().find('td:nth-child(' + i + ')');
        break;
    }
    td.find('input').focus();
  });
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2011, 18:32
Интересующийся
Отправить личное сообщение для copenhagen Посмотреть профиль Найти все сообщения от copenhagen
 
Регистрация: 01.07.2010
Сообщений: 18

Немного неправильно выразился по коду таблицы. В одной ячейке может быть несколько input'ов с разными именами. Предыдущее решение на это не рассчитано.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 18:27
в модальном окне не работает скрипт проверки формы necroms jQuery 1 11.03.2011 15:14
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12
Перемещение между строками ввода стрелками Воитель Общие вопросы Javascript 5 23.08.2010 15:23
Простая проверка формы. Добавить "динамики". Jurasmi Элементы интерфейса 3 07.04.2010 16:48