Jquery，根据按键滚动div答案

【问题标题】：Jquery, scroll a div depending on keypressJquery，根据按键滚动div
【发布时间】：2012-04-27 08:39:33
【问题描述】：

我有一个 300px 固定高度的 div。在 div 内部有一个表格，该表格的输入高度较大，这使得 div 可以滚动（这是我的选择，所以我希望它溢出：自动）..我没有超过 300px 的空间通过按键事件，我希望有人在表 tds 上上下移动，但是当他转到最后一个可见的 td 时，div 不会滚动，因此用户继续到下一个 td，但由于 td 不再可见滚动我希望 div 在他位于最后一个可见的 td 时向上滚动并在 td.height() 中滚动

有什么建议吗？

到目前为止，当有人通过上下按键更改 td 时，我添加了一个类

$(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');
    }
    });
});

表格在一个高度为 300px 的容器内；和溢出：自动；并且表的第一个 td 有一个类 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>

对不起，缩进。我是 stackoverflow 和 Jquery 的新手。我的 tds 已经 tp 16 以使表格滚动并测试功能或只是减少 300px 的高度

【问题讨论】：

我建议你在问题中使用标点符号。你知道，就像 .和 , 和 ;
能否请您提供此脚本的 html 标记
我建议您填写 jsFiddle 并包含您的 CSS。由于您已经拥有这么多代码，因此更容易找到问题。如果您从未摆弄过，请检查一下，它非常不言自明
我会用 jsFiddle 试试，但我想要一些关于如何定位最后一个可见 td 的提示，以便让 div 在 keyCode=="40" 上向下滚动并滚动特定高度，即td的高度
试试下面的代码看看...

标签： jquery jquery-ui jquery-plugins jquery-selectors jquery-scrollable

【解决方案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>

【讨论】：

现场演示见此链接：jsfiddle.net/nanoquantumtech/ED7f3 in firefox