Jquery, scroll a div depending on keypress
Jquery, scroll a div depending on keypress
HTML
<div class="container">
<table id='table' width='100%'>
<tr>
<td class='borderRed'>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
</table>
</div>
CSS
.borderRed
{
border: 1px solid red;
}
.container
{
width: auto;
height: 300px;
overflow: auto;
}
JavaScript
$(document).ready(function () {
$('body').keypress(function (e) {
var obj = $('#table').find('.borderRed');
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 40) {
if ($('#table tr:last td:last').hasClass('borderRed') === true) {
$('#table tr:first td:first').addClass('borderRed');
}
else {
obj.parent().next().children().addClass('borderRed');
}
obj.removeClass('borderRed');
}
else if (code === 38) {
if ($('#table tr:first td:first').hasClass('borderRed') === true) {
$('#table tr:last td:last').addClass('borderRed');
}
else {
obj.parent().prev().children().addClass('borderRed');
}
obj.removeClass('borderRed');
}
});
});