Nuitari,
в примере неотключен скролинг страницы по кнопкам и для начала работы необходимо любую строку выбрать. http://learn.javascript.ru/play/ML9Doc |
danik.js,
лучше подскажи как сделать код рабочим, ато пока танцы с бубнами получились с keyup - если конечно интересно. 1. неотключен скролинг 2. по клику на таблицу сделать keyup сразу рабочим. |
Выделение строк таблицы по клику и/или кнопками вверх вниз
:dance: :write:
<!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>
|
| Часовой пояс GMT +3, время: 07:10. |