0

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

请问有什么建议吗？

到目前为止，当有人用 up 和 down 按键更改 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 的高度

4

1 回答 1

0 
<!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>
于 2012-04-28T07:54:29.410 回答