Question

我有一个300px固定高度的div。在div内部有一个表，其输入具有更大的高度，这使得div可以滚动（这是我的选项，所以我希望它是溢出的：自动）..我没有超过300px的空间使用按键事件我希望有人在桌面上上下移动，但是当他去到最后一个可见的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;和溢出：auto; 并且表的第一个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的新手.. 为了使表格滚动并测试功能或者只是降低300px的高度，我的tds达到了tp 16

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

Jquery，根据按键滚动div

1 个答案: