Форум

Nuitari · #1 (**permalink**) 13.08.2013, 14:15

Есть таблица выводимая php функцией-поиска. При нажатиях на клавиатуре клавиш "ВВЕРХ" и "ВНИЗ" курсор должен бегать по строкам таблицы меняя из класс. Курсор должен представлять собой полупрозрачную картинку или стрелочку в диве... класс при наведении курсора даю через onmouseover, а как написать ф-цию для клавиатуры не знаю. Помогите пожалуйста!

danik.js · #2 (**permalink**) 13.08.2013, 14:24

Событие keydown (может быть keypress или keyup), свойство keyCode объекта события !!!

Nuitari · #3 (**permalink**) 13.08.2013, 14:31

это я тоже понимаю, а вот как сделать так чтобы при нажатии оно перескакивало вверх или в них, как оно будет определять строку что сверху или та что снизу и менять их класс соответственно тащить курсор?

animhotep · #4 (**permalink**) 13.08.2013, 14:46

переставлять класс active срокам через http://api.jquery.com/next/ http://api.jquery.com/prev/ например

Riim · #5 (**permalink**) 13.08.2013, 15:27

animhotep,
а в другую строку (tr) как на жиквери перебрасывать будешь?

Nuitari,
пригодиться: http://webew.ru/articles/598.webew

animhotep · #6 (**permalink**) 13.08.2013, 16:14

Сообщение от Riim

а в другую строку (tr) как на жиквери перебрасывать будешь?

както так
$(".active").parent('tr').next().addClass(".active ");

Riim · #7 (**permalink**) 13.08.2013, 16:30

animhotep,
а сорри, все верно, я невнимательно прочитал

, думал надо по ячейкам таблицы перемещаться.

рони · #8 (**permalink**) 13.08.2013, 16:46

Вариант на jquery-ui selectable

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>selectable demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
  <style>
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    #selectable tbody tr:hover {  cursor: pointer; background-color: #FFB861;}
  </style>
  <script>
  $(function() {
        $( "#selectable tbody" ).selectable();
                $(document).keyup(function(e) {
                    var lastSelected = $(".ui-selected");
                    lastSelected.removeClass("ui-selected");
                    var Selected;
                    if(e.which == 40) {
                    Selected = lastSelected.next().size()? lastSelected.next(): lastSelected.prevAll(":last");
                    Selected.addClass("ui-selected");
                        				}
                    if(e.which == 38) {
                    Selected = lastSelected.prev().size() ? lastSelected.prev(): lastSelected.nextAll(":last");
                    Selected.addClass("ui-selected");
                        				}
						})
    });
  </script>
</head>

<body>
  <table align="center" class="table1" id="selectable">
    <thead>
      <tr>
        <th>col1</th>

        <th>col2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>test</td>

        <td>test</td>
      </tr>

      <tr>
        <td>test</td>

        <td>test</td>
      </tr>

      <tr>
        <td>test</td>

        <td>test</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Nuitari · #9 (**permalink**) 13.08.2013, 16:57

я вставил ваш код и пробыва тестить но при нажатии кнопок 38, 40 ничего не происходит подскажите в чем у меня может быть проблема?

danik.js · #10 (**permalink**) 13.08.2013, 17:21

рони, у deff'а научился называть переменные с большой буквы? Это же не конструктор.

Форум

Справочник

Discord чат

Курсы javascript