Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.08.2013, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Nuitari,
в примере неотключен скролинг страницы по кнопкам и для начала работы необходимо любую строку выбрать.
http://learn.javascript.ru/play/ML9Doc
Ответить с цитированием
  #12 (permalink)  
Старый 13.08.2013, 17:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

danik.js,
лучше подскажи как сделать код рабочим, ато пока танцы с бубнами получились с keyup - если конечно интересно. 1. неотключен скролинг 2. по клику на таблицу сделать keyup сразу рабочим.
Ответить с цитированием
  #13 (permalink)  
Старый 13.08.2013, 18:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Выделение строк таблицы по клику и/или кнопками вверх вниз

<!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>
  <style>
    body{ height: 1000px }
    #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()
     {
       var tr = $("#selectable tbody tr");
       tr.click(function ()
         {
           tr.removeClass("ui-selected");
           $(this).addClass("ui-selected")
         }
       )
       $(document).on("keypress keydown", function(event) {event.preventDefault();})
       $(document).on("keyup", function(event)
         {
           event.preventDefault();
           var selected = $(".ui-selected");
           selected.removeClass("ui-selected");
           if(event.which == 40) {
             selected = selected.next().size()? selected.next():tr.first() ;
           }
           if(event.which == 38) {
             selected = selected.prev().size()? selected.prev():tr.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>

Последний раз редактировалось рони, 13.08.2013 в 18:26.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
javascript обфускатор или как правильно скрыть код syegorius Общие вопросы Javascript 1 19.09.2012 02:58
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Как писать код который легко поддерживать, расширять, читать. Policeman Общие вопросы Javascript 3 24.03.2012 05:40
Opera отдаёт неправильный код функциональных клавиш. NT Man Opera, Safari и др. 1 19.01.2010 02:45
Расшифруйте код javascript sochinec Общие вопросы Javascript 7 01.08.2009 23:51