Jquery，根据按键滚动一个div_Jquery_Jquery Ui_Jquery Plugins_Jquery Selectors_Jquery Scrollable

Jquery，根据按键滚动一个div

jquery jquery-ui jquery-plugins

Jquery，根据按键滚动一个div,jquery,jquery-ui,jquery-plugins,jquery-selectors,jquery-scrollable,Jquery,Jquery Ui,Jquery Plugins,Jquery Selectors,Jquery Scrollable,我有一个300px固定高度的div。在div a内部有一个表，该表具有更高的输入，使div可以滚动（这是我的选项，所以我希望它溢出：自动）…我没有超过300px的空间通过按键事件，我希望有人在表tds上上下移动，但当他移动到最后一个可见的td时，div没有滚动，因此用户继续移动到下一个td，但由于滚动，td不再可见我希望div在最后可见的td中向上滚动，并在td.height（）中滚动有什么建议吗到目前为止，我添加了一个类，当有人用上下键更改td时 $(document).ready(f

我有一个300px固定高度的div。在div a内部有一个表，该表具有更高的输入，使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


1.
2.
3.
4.
5.
6.
7.

对不起，缩进了。我是stackoverflow和Jquery的新手。。我的tds在tp 16上，以使表格滚动并测试功能，或只是降低300px的高度


<!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>

$（文档）.ready（函数（）{
$（'body'）。按键（功能（e）{
var obj=$（“#表”）.find（“.bordered”）；
var代码=（e.keyCode？e.keyCode:e.which）；
如果（代码===40）{
if（$（'#table tr:last td:last'）.hasClass（'bordered'）==true）{
$（'#表tr:first td:first'）.addClass（'bordered'）；
}
否则{
obj.parent（）.next（）.children（）.addClass（'bordered'）；
}
对象removeClass（“带边框”）；
}
否则如果（代码===38）{
if（$（'#table tr:first td:first'）.hasClass（'bordered'）==true）{
$（'#表tr:last td:last'）.addClass（'bordered'）；
}
否则{
obj.parent（）.prev（）.children（）.addClass（'bordered'）；
}
对象removeClass（“带边框”）；
}
});
});
.带边框
{
边框：1px纯红；
}
容器
{
宽度：自动；
高度：300px；
溢出：自动；
}
1.
2.
3.
4.
5.
6.
7.

我建议您在问题中使用标点符号。你知道，就像。及,及;；你能为这个脚本提供html标记吗？我建议你填写一个包含CSS的表格。因为您已经有这么多代码，所以更容易找到问题。如果你从来没有摆弄过，那就去看看吧，这是一个很好的自我解释。我会用JSFIDLE试试，但我想知道一些关于如何定位最后一个可见的td的技巧，以便让div在keyCode==“40”上向下滚动，滚动到一定的高度，也就是TDT的高度。试试下面的代码，看看……对于实时演示，请看这个链接：在firefox中

<!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>