Jquery, прокрутите div в зависимости от нажатия клавиши

У меня есть div с фиксированной высотой 300px. Внутри div есть таблица, в которой есть входы с большей высотой, что позволяет прокручивать div (это мой вариант, поэтому я хочу, чтобы он был переполнен: авто). У меня не больше 300 пикселей пространства при нажатии клавиш Если я хочу, чтобы кто-то двигался вверх и вниз по таблице tds, но когда он переходит к последнему видимому td, то div не прокручивается, поэтому пользователи переходят к следующему td, но td больше не виден из-за необходимой мне прокрутки. div для прокрутки вверх, когда он находится в последнем видимом td, и прокрутка в td.height()

Любые предложения, пожалуйста?

Пока я добавляю класс, когда кто-то меняет тд с помощью клавиш вверх и вниз

$(document).ready(function() {
    $('body').keypress(function(event){
    var a = $('#table .borderRed');

    if((event.keyCode)=="40"){
        a.parent().next().children().addClass('borderRed');
        a.removeClass('borderRed');
    }

    else if ((event.keyCode)=="38"){
        a.parent().prev().children().addClass('borderRed');
        a.removeClass('borderRed');
    }
    });
});

Стол находится внутри контейнера с высотой:300 пикселей; и переполнение: авто; и первый тд таблицы имеет класс 1, и это класс, который я добавляю..

    .borderRed{ border: 1px solid red;}  
    .container {width: auto; height:300px; overflow:auto;}

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>
<tr>
    </table>
    </div>

Извините за отступ. Я новичок в stackru и Jquery. Мои tds до tp 16, чтобы прокрутить таблицу и проверить функциональность или просто уменьшить высоту 300px

Источник

1 ответ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/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');
                }
            });
        });
    </script>
    <style type="text/css">
        .borderRed
        {
            border: 1px solid red;
        }
        .container
        {
            width: auto;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>
Источник
Другие вопросы по тегам