GridView按下方向键上下键选择数据行时，如何让数据保持在屏幕之内？

用户可以点击选中行，也可以按下上下键选中行，当按下方向键下键选中行是屏幕显示的最后一行时，
如何让GridView向上自动滚动，不然就需要下拉才能看的到后面的选中行了，key事件能否只针对某个控件？
而不是整个页面？求js控制代码，哎没有分了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

复杂的界面功能最好不要用服务端控件，自己写div，table，javascript搞定.
lz就是求你的js代码呢。写吧........
求控制代码，让gridView向上滚动，让后面的数据都呈现到屏幕上
写了一点，要下班了
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    td{ text-align:center; }
    .trSelected{ background-color:Red; }
    tbody tr{ cursor:pointer; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //固定表头
        fixTableHeader("#table1", 100);        $("#table1 > tbody >tr").click(function () {
            $(this).siblings().removeClass().end().toggleClass("trSelected");
        });        $("html").keyup(function (event) {
            if (!$("#table1 > tbody >tr").hasClass("trSelected")) {
                $("#table1 > tbody >tr:first").addClass("trSelected");
            }            var $trSelected = $("#table1 > tbody >tr[class*=trSelected]");
            //向上
            if (event.which == "38") {
                //如果上面还有行，则置为上行选中
                if ($trSelected.prevAll().length > 0) {
                    $trSelected.prev().siblings().removeClass().end().toggleClass("trSelected");
                    //$("#table1").parent("div").scrollTop( $trSelected.height() * ($trSelected.prevAll() - 2) );
                }
            }
            //向下
            else if (event.which == "40") {
                //如果下面还有行，则置为下行选中
                if ($trSelected.nextAll().length > 0) {
                    $trSelected.next().siblings().removeClass().end().toggleClass("trSelected");
                    //$("#table1").parent("div").scrollTop($trSelected.height() * ($trSelected.nextAll()));
                }
            }
        });
    });    function fixTableHeader(gv, scrollHeight) {
        var gvn = $(gv).clone(true).removeAttr("id");
        $(gvn).find("tr:not(:first)").remove();
        $(gv).before(gvn);
        $(gv).find("tr:first").remove();
        $(gv).wrap("<div style='height:" + scrollHeight + "px; overflow-y: scroll;overflow-x:hidden; overflow: auto; padding: 0;margin: 0;'></div>");
    }
</script>
</head>
<body>
<div style="width:400px;">
    <table id="table1" width="100%" cellspacing="1" cellpadding="1" border="1" >
        <thead>
            <tr><th style="width:100px;">1</th><th style="width:100px;">2</th><th style="width:100px;">3</th><th>4</th></tr>
        </thead>
        <tbody>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
        </tbody>
    </table>
</div>
</body>
</html>