Показать сообщение отдельно
  #8 (permalink)  
Старый 13.08.2013, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Вариант на 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>

Последний раз редактировалось рони, 03.10.2013 в 23:07.
Ответить с цитированием